为何为div设置display: flex会改变内部div的高度？

问题描述 #

我编写了如下HTML/CSS代码，当切换.cards-container中的display: flex属性时，.card元素的高度会出现变化：未设置display: flex时高度收缩，设置后高度增加。我原本认为Flexbox不会影响内部div的尺寸，想知道该行为的原因。

情况1：.cards-container设置display: flex #

.cards-container {
  display: flex;
  background-color: #e8e8e8;
}

.card {
  width: 250px;
  height: fit-content;
  border-radius: 30px;
  background-color: white;
}

.card>.card-bottom-container {
  margin: 1rem;
  gap: 1rem;
}

.card>.card-bottom-container>.card-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card>.card-bottom-container>.card-tags-container>.card-tag {
  background-color: red;
  border-radius: 10px;
  padding: 10px;
}

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="cards-container">
  <div class="card">
    <div class="card-bottom-container">
      <div class="card-tags-container">
        <a href="/path-1" class="card-tag"></a>
        <a href="/path-2" class="card-tag"></a>
        <a href="/path-3" class="card-tag"></a>
        <a href="/path-4" class="card-tag"></a>
        <a href="/path-5" class="card-tag"></a>
      </div>
    </div>
  </div>
</div>

情况2：.cards-container未设置display: flex（仅修改该属性，其余代码不变） #

.cards-container {
  background-color: #e8e8e8;
}

.card {
  width: 250px;
  height: fit-content;
  border-radius: 30px;
  background-color: white;
}

.card>.card-bottom-container {
  margin: 1rem;
  gap: 1rem;
}

.card>.card-bottom-container>.card-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card>.card-bottom-container>.card-tags-container>.card-tag {
  background-color: red;
  border-radius: 10px;
  padding: 10px;
}

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="cards-container">
  <div class="card">
    <div class="card-bottom-container">
      <div class="card-tags-container">
        <a href="/path-1" class="card-tag"></a>
        <a href="/path-2" class="card-tag"></a>
        <a href="/path-3" class="card-tag"></a>
        <a href="/path-4" class="card-tag"></a>
        <a href="/path-5" class="card-tag"></a>
      </div>
    </div>
  </div>
</div>

原因分析 #

核心差异来自Flex布局与普通块级布局的默认规则：

• 普通块级布局时：.card作为块级元素，height: fit-content会让它的高度完全贴合内部内容。同时.card-bottom-container不是Flex/Grid容器，设置的gap: 1rem不生效，没有额外垂直间距，高度仅由标签容器和上下margin决定。
• Flex容器布局时：.card成为Flex项目，Flex容器默认的align-items: stretch会强制Flex项目在垂直方向上拉伸，以填满容器的可用高度。尽管.card设置了height: fit-content，但stretch的优先级更高，会让.card的高度被拉伸至与Flex容器高度一致（容器高度由自身内容+拉伸空间决定）。另外，Flex项目默认的min-height: auto会阻止高度小于内容高度，最终导致.card高度比块级布局时更高。

解决方法 #

如果要让两种布局下.card高度一致，只需给.card添加align-self: flex-start，覆盖Flex容器的默认拉伸行为：

.card {
  width: 250px;
  height: fit-content;
  border-radius: 30px;
  background-color: white;
  align-self: flex-start; /* 添加这一行 */
}

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