对 Flex Shrink and Grow 很困惑

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

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

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

仅供参考：我应该注意，我将其与 slick.js 滑块一起使用。我的两个 div 没有被插件影响，所以我的滑块被包裹在一个额外的容器 (box2) 中。滑块容器占据了框 2 的 100% 宽度。我知道在这种情况下 flex 似乎可以正常动态调整，所以如果我在框 2 中有一个段落，宽度将动态调整，但滑块似乎正在制作它真的很挑剔，它需要包含 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>

So what I'm trying to do is make a div that is 100% width.

完成。 display: flex 设置了一个块级容器，占据父级的 100% 宽度。

The child elements will be 25% and 75%. I want the 25% div to have a min-width.

好的。 .box1 最小宽度为 400 像素（在您的代码中设置），最大宽度为 25%。

So I want the 75% div to automatically adjust to just filling the remaining space when the minimum width brings it over 25%.

那就别用75%了。而是使用 flex-grow: 1，它告诉 .box2 使用 .box1 未使用的 space。

对 Flex Shrink and Grow 很困惑

Very confused about Flex Shrink and Grow

html

css

flexbox

slick.js