如何让Flexbox中两个Div仅保持自身内容所需高度？

嘿，这个问题我碰到过好多次啦！默认情况下，Flexbox容器里的子元素都会自动拉伸，跟容器里最高的那个元素保持等高——这就是为啥你的绿色盒子会被红色盒子带得变高。要解决这个其实很简单，两种方法任你选：

方法一：给整个Flex容器设置对齐方式 #

直接给.flex容器添加align-items: flex-start;属性，这样所有子元素都会沿着垂直方向（交叉轴）的顶部对齐，各自只占用自身内容需要的高度：

.flex { 
  display: flex; 
  align-items: flex-start; /* 关键属性，取消默认的拉伸行为 */
}
.border { border: 2px solid black; }
.bg-red { background: red; }
.bg-green { background: green; }
.p-2 { padding: 8px; }

方法二：单独给绿色盒子设置对齐规则 #

如果你只想让绿色盒子保持自身高度，其他子元素（比如这里的红色盒子）还是保持拉伸的话，可以给绿色盒子单独设置align-self: flex-start;，它会覆盖容器的默认对齐设置：

.flex { display: flex; }
.border { border: 2px solid black; }
.bg-red { background: red; }
.bg-green { 
  background: green; 
  align-self: flex-start; /* 单独给绿色盒子设置对齐方式 */
}
.p-2 { padding: 8px; }

原理说明 #

Flexbox的align-items属性默认值是stretch，这个值会让所有子元素在交叉轴（这里是垂直方向）上填满容器的可用空间，从而实现等高效果。而flex-start会让子元素紧贴交叉轴的起始位置，只占用自身内容所需的高度；align-self则是给单个子元素自定义交叉轴对齐方式的属性，优先级高于容器的align-items。

用上面任意一种方法配合你的HTML代码，就能实现你想要的效果啦：

<div class="flex">
 <div class="bg-red border p-2">
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 <p>content-red</p>
 </div>
 <div class="bg-green border p-2">
 <p>content-green</p>
 </div>
</div>

内容的提问来源于stack exchange，提问作者Jenssen