Question

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  width: 100%;
  height: 200px;
  display: flex;
}

.box1 {
  width: 25%;
  min-width: 400px;
  height: 100%;
}

.box2 {
  width: 75%;
  height: 100%;
}

所以我想做的是制作一个{strong> 100％宽度的div。子元素将为 25％和 75％。我希望 25％ div有一个min-width。因此，我希望 75％ div在最小宽度使box1超过 25％时自动调整以仅填充剩余空间。

flex-grow或flex-shrink似乎都不适合我。我不希望box2缩小，因为在大多数情况下它应该比box1大。我不希望box2增长，因为有时它会比box1小。

仅供参考：我应该注意的是，我正在使用slick.js滑块。我的插件没有碰到两个div，所以我的滑块包裹在另一个容器中（box2）。滑块容器占用框2的100％宽度。我知道在这种情况下flex似乎可以正常调整，因此，如果我在box2中有一个段落，则宽度会动态调整，但是滑块似乎可以它真的很挑剔，它需要包含box2的宽度能够正常工作。

Answer 1

.container {
  display: flex;
  height: 200px;
  border: 1px dashed black;
}

.box1 {
  flex: 1 0 400px; /* flex-grow, flex-shrink, flex-basis */
  max-width: 25%;
  background-color: green;
}

.box2 {
  flex-grow: 1;
  background-color: orangered;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

所以我想做的是制作一个100％宽度的div。

完成。使用display: flex设置了一个块级容器，该容器占父级宽度的100％。

子元素将分别为25％和75％。我希望25％的div具有最小宽度。

好的。 .box1的最小宽度为400px（根据您的代码设置），最大宽度为25％。

因此，我希望75％的div自动调整为仅在最小宽度超过25％时填充剩余空间。

然后不要使用75％。而是使用flex-grow: 1，它告诉.box2消耗.box1未使用的空间。

对Flex Shrink and Grow感到非常困惑

1 个答案: