html - 对 Flex 收缩和增长非常困惑

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

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

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

仅供引用:我应该注意，我将其与 slick.js slider 一起使用。不过，我的两个 div 没有受到该插件的影响，因此我的 slider 被包装在另一个容器 (box2) 中。 slider 容器占用了框 2 的 100% 宽度。我知道在这种情况下，flex 似乎通常会动态调整，所以如果我在 box2 中有一个段落，宽度会动态调整，但是使用 slider 似乎会导致它真的很挑剔，并且它需要包含的 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 设置了一个 block 级容器，它占据父级的 100% 宽度。

---

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

好的。 .box1 的最小宽度为 400px(在代码中设置)，最大宽度为 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 未使用的空间。