Flex box 防止溢出并保持右侧项目固定宽度和左侧项目收缩

Question

使用flex-basis 属性保持左侧项目具有固定宽度没有问题。但是我有一个场景，我不希望左元素被固定，而是保持右元素的宽度固定。我尝试将flex-basis 放在正确的元素上，但是问题是弹性项目溢出了它的容器。

有没有办法做到这一点？例如我有下面的布局：

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

问题

我想要做的是将右侧元素（橙色）200px 保持在固定宽度，并根据可用空间缩小左侧弹性项目（红色）。但是，问题是当视口太窄时，正确的元素会溢出容器，请参见下图。

Answer 1

由于flex-shrink 默认为1，这意味着.col 可以缩小到给定的200px 以下。

将flex-shrink: 0 添加到.col 规则，它不会。

堆栈sn-p

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

---

如果您还想完全避免orange 框被推到视野之外，并且min-width 默认为auto，这意味着dashboard 和flex-container 不会比它们的小内容，您还需要将min-width: 0 设置为他们两个，以便他们将。

堆栈sn-p

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
  min-width: 0;                         /*  added  */
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  min-width: 0;                         /*  added  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

---

处理左侧项目的第二个选项当然是将flex-wrap: wrap 设置为flex-container

堆栈sn-p

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;                      /*  added  */
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  max-width: 200px;                     /*  added, to keep them max 200px  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

Answer 2

我想要做的是将右侧元素（橙色）保持在固定宽度，并根据可用空间缩小左侧 flex-item（红色）。

您可以使用 css calc 函数来实现这一点。

https://developer.mozilla.org/en/docs/Web/CSS/calc

根据您使用的类名，您可以执行以下操作：

.col {
  width: 200px;
}

.flex-container {
  width: calc(100% - 200px);
}