CSS Flex 布局中子元素 height:100% 失效的两种解决方案

问题描述

在 Flex 布局中，当父容器设置 flex: 1 但未显式定义 height 属性时，子元素设置 height: 100% 会失效。这是因为百分比高度需要基于父元素的明确高度计算。

解决方案一：设置父容器 height: 0

.parent {
  display: flex;
  flex: 1;
  height: 0;  /* 关键：为子元素百分比高度提供计算基准 */
}

.child {
  height: 100%;  /* 此时可正常生效 */
}

原理：父容器设置 height: 0 后，配合 flex: 1 会在 Flex 布局中自动扩展，同时为子元素的百分比高度提供明确的计算基准。

解决方案二：绝对定位（推荐）

.parent {
  display: flex;
  position: relative;  /* 建立定位上下文 */
}

.child {
  position: absolute;
  height: 100%;  /* 相对于定位父容器计算 */
  /* width: 100% */
  /* 或者top:0;bottom:0;*/
}

原理：通过 position: absolute 使子元素脱离文档流，其 height: 100% 会相对于最近的定位祖先元素（position: relative）进行计算。

方案对比

参考来源：父盒子设置flex:1，子盒子设置height:100%无效的解决方法