CSS flexbox wrap没有调整大小以适应内容[重复]

Question

显示问题的简化 plunkr： https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview

如果您调整右视口的大小，直到两个容器不再适合同一行，右视口将移动到新的一行。

但是，父 inline-flex 容器的宽度不会改变，将顶部的“header”元素扔掉 - “header”中的“button”应该与下面容器中的最后一项右对齐。

两个（或更多）项目具有固定宽度，但它们之间没有空间。这些是唯一具有固定宽度或高度的元素。

当项目换行到新行（不使用 js，纯 HTML/CSS）时，如何强制 flex 容器宽度适合/缩小？

.main-flex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-container {
  flex-grow: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

<div style="margin-top: 100px;" class="main-flex">
  <div>
    <span>header</span>
    <span style="float:right">button</span>
  </div>
  <div class="flex-container">
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
  </div>
</div>

Answer 1

在 CSS 中，父容器不知道其子容器何时换行。因此，它会继续扩展其大小，而不会注意到内部发生的事情。

换句话说，浏览器在初始级联上呈现容器。当孩子换行时，它不会重排文档。

这就是容器不收缩包装较窄布局的原因。它只是继续，好像没有任何东西被包裹，右边的保留空间证明了这一点。

更多细节在这里：Make container shrink-to-fit child elements as they wrap

---

但您不需要缩小容器以使您的布局正常工作。它可以通过对您的 HTML 和 CSS 进行一些调整来构建。

.main-flex {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-container>div {
  height: 400px;
  width: 250px;
  border: 1px solid black;
}

.flex-container:nth-child(2)>span {
  align-self: flex-end;
}

<div class="main-flex">
  <div class="flex-container">
    <span>header</span>
    <div></div>
  </div>
  <div class="flex-container">
    <span>button</span>
    <div></div>
  </div>
</div>

revised demo