Flex布局中子div高度随图片同步异常问题求助

在flex容器内包含图片和div两个子元素时，div会自动和图片高度一致，这并非预期效果，希望div仅占据自身内容的高度。

复现代码 #

<div class="flex-container">
  <img class="responsive-img" src="https://png.pngtree.com/png-clipart/20230511/ourmid/pngtree-isolated-cat-on-white-background-png-image_7094927.png" />
  <div class="content-box"></div>
</div>

<style>
.flex-container {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.responsive-img {
  height: 21.688rem;
}

.content-box {
  padding: 5px;
  width: 23.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background-color: #1a1a1a;
}
</style>

问题原因 #

Flex容器默认设置了align-items: stretch，这个属性会让所有子元素在交叉轴（此处为垂直方向）上拉伸至容器的高度。而flex容器的高度由其中最高的子元素（也就是设置了固定高度的图片）决定，因此div会被强制拉伸到和图片一样的高度。

解决方法 #

有两种简单的修复方式：

方式1：给目标div设置align-self

给.content-box添加align-self: flex-start，让它脱离容器默认的拉伸规则，只占据自身内容高度：

.content-box {
  padding: 5px;
  width: 23.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background-color: #1a1a1a;
  align-self: flex-start; /* 添加这一行 */
}

方式2：修改容器的align-items

如果希望所有子元素都不拉伸，可以直接给.flex-container设置align-items: flex-start：

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: flex-start; /* 添加这一行 */
}

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