<分区>
正如您在下面的代码中所看到的，flex 容器中的左侧 div 会拉伸(stretch)以满足右侧 div 的高度。是否有一个我可以设置的属性，使其高度成为保存其内容所需的最小高度(就像通常的 height: auto flex 容器外的 div)？
#a {
display: flex;
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}<div id="a">
<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>最佳答案
align-items 或相应的 align-content 属性控制此行为。
align-items 定义元素的定位垂直到flex-direction。
默认的flex-direction是row，因此可以通过align-items控制垂直方向的放置。
还有 align-self 属性来控制每个元素的对齐方式。
#a {
display:flex;
align-items:flex-start;
align-content:flex-start;
}
#a > div {
background-color:red;
padding:5px;
margin:2px;
}
#a > #c {
align-self:stretch;
}<div id="a">
<div id="b">left</div>
<div id="c">middle</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>css-tricks 具有出色的 article关于这个话题。 我建议多读几遍。
关于html - 如何让 flex 元素不填满 flex 容器的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33212892/