如何让Flexbox子元素根据另一子元素尺寸自适应调整？

问题背景 #

我有一个空div（类名为large-child），它的固定高度决定了灰色parent容器的高度。尝试将child-flex元素高度设为100%来垂直填满父容器，但没有效果，只有把child-flex尺寸设得比large-child更大才能填满空间。

原因分析 #

父容器设置了align-items: center，这个属性会让Flex子元素在垂直方向上居中对齐，同时会限制子元素的高度无法拉伸至父容器的高度，导致height: 100%失效。

可行解决方案 #

方案一：移除父容器的居中对齐 #

将父容器的align-items: center移除，Flex容器默认的align-items: stretch会让所有子元素自动垂直填满父容器，此时child-flex不需要设置height: 100%。

修改后的CSS：

.parent {
  display: flex;
  width: 100%;
  background-color: gray;
  /* 移除align-items: center，使用默认的stretch */
  height: fit-content
}

.child-flex {
  display: flex;
  background-color: blue;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

方案二：保留父容器居中，单独拉伸目标子元素 #

如果需要父容器的其他子元素保持垂直居中，只为child-flex设置align-self: stretch，覆盖父容器的align-items规则。如果child-flex内部的内容需要垂直居中，可以在child-flex里添加align-items: center。

修改后的CSS：

.parent {
  display: flex;
  width: 100%;
  background-color: gray;
  align-items: center;
  height: fit-content
}

.child-flex {
  display: flex;
  background-color: blue;
  align-self: stretch;
  /* 可选：让内部内容垂直居中 */
  align-items: center;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

最终HTML结构（两种方案通用） #

<div class="parent">
  <div class="large-child"></div>
  <div class="child-flex">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
</div>

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