一个简化的 plunkr 来显示问题：https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview
如果调整右视口的大小直到两个容器不再适合同一行，则右视口将移动到新行。
但是，父级 inline-flex 容器宽度不会改变，从而将顶部的“标题”元素关闭 - “标题”中的“按钮”应与下面容器中的最后一个项目右对齐。
两个（或多个）项目具有固定宽度，但它们之间没有空间。这些是唯一具有固定宽度或高度的元素。
当项目换行到新行时，如何强制 Flex 容器宽度适应/收缩（不使用 js，纯 HTML/CSS）？
.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>
在 CSS 中，父容器不知道其子容器何时换行。因此，它继续扩大其规模，而忽略了内部发生的情况。
换句话说，浏览器在初始级联上呈现容器。当子级换行时，它不会重排文档。
这就是为什么容器不会收缩包装较窄的布局。它只是继续下去，就好像没有任何东西被包裹一样，正如右侧的保留空间所证明的那样。
更多详细信息请参见此处：使容器在包裹子元素时收缩以适合它们 https://stackoverflow.com/q/37406353/3597276
但您不需要缩小容器即可使布局正常工作。只需对 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>
修改后的演示 https://plnkr.co/edit/iRRoh4UoLYMM4MXqWqok?p=preview
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
