flex子项设置height:100%无法自适应高度？原因及修复方案

这个问题其实是对Flex布局默认特性的理解偏差导致的——Flex容器的子项本来就自带等高特性，你不用手动设置height:100%，反而这个设置会因为没有明确的高度参照而失效。

先给你拆解问题根源：当Flex容器的高度是默认的auto（也就是由内容最高的子项，比如你的clm2，撑开）时，子项的height:100%找不到具体的像素高度作为参照，浏览器不知道这个100%是相对于什么的，自然不会生效。

下面是几种针对性的修复方案，按推荐优先级排序：

方案1：利用Flex默认的拉伸特性（最简洁推荐） #

Flex布局的align-items属性默认值是stretch，这个属性会让所有子项自动拉伸，高度和容器完全一致（也就是和最高的子项等高）。你只需要移除clm1的height:100%，并确保Flex容器没有修改过align-items属性即可。

示例代码：

<div class="flex-container">
  <div class="clm1">橙色区域</div>
  <div class="clm2">
    蓝色区域<br>
    这里有很多多行内容<br>
    用来撑高整个容器
  </div>
</div>

.flex-container {
  display: flex;
  /* align-items: stretch; 这是默认值，可省略 */
  gap: 10px; /* 可选，添加子项间距 */
}

.clm1 {
  background: orange;
  width: 200px;
  /* 删掉 height: 100%; */
}

.clm2 {
  background: blue;
  color: #fff;
  flex: 1; /* 让蓝色区域占满剩余宽度，可选 */
}

方案2：如果必须保留height:100%的场景 #

如果你因为某些业务限制一定要保留height:100%，那可以通过给clm1设置align-self: stretch来强制拉伸（其实和默认效果一致），尤其适合你之前修改过Flex容器align-items属性的情况：

.flex-container {
  display: flex;
  align-items: flex-start; /* 假设你修改了这个属性 */
}

.clm1 {
  background: orange;
  width: 200px;
  align-self: stretch; /* 强制拉伸到容器高度 */
  height: 100%; /* 此时100%有了明确的参照（容器高度），可以生效 */
}

额外情况：子项内部元素需要撑满高度 #

如果你的clm1里面还有嵌套元素，需要让内部元素也跟着撑满clm1的高度，那可以给clm1也设置Flex布局：

.clm1 {
  background: orange;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.clm1 .inner-content {
  flex: 1; /* 让内部元素自动撑满剩余高度 */
  background: rgba(255,255,255,0.3);
}

这样不管clm2的内容多高，clm1都会自动和它保持等高，内部元素也能跟着撑满高度。

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