柔性盒防止溢出并保持正确的项目固定宽度和左项缩小

Question

我没有问题使用flex-basis属性保持左项具有固定宽度。但我有一个场景，我不希望修复左边的元素，而是保持正确的元素宽度固定。我尝试将flex-basis放入正确的元素，但问题是弹性项溢出其容器。

有没有办法实现这个目标？例如，我有以下布局：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

问题

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

Answer 1

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

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

Stack snippet

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您还想完全避免将orange框推出视图，并且min-width默认为auto，则表示dashboard和{{ 1}}不会比他们的内容小，你还需要为他们两个设置flex-container，这样他们就可以了。

Stack snippet

＆＃13;

＆＃13;

min-width: 0

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

处理左项的第二个选项当然是将<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

Stack snippet

＆＃13;

＆＃13;

flex-container

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

我想要做的是将正确的元素（橙色）保持在固定的宽度，然后根据可用空间缩小左侧的柔化项目（红色）。

您可以使用css calc函数来实现此目的。

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

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

.col {
  width: 200px;
}

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