fixed父元素高度同步至子元素：height:100%不生效问题排查

核心问题 #

子元素设置height:100%无效的原因很直接：百分比高度需要父元素有明确的height属性值作为参照。你给父容器fixed-container只设置了max-height，这只是限制容器的最大高度，并没有给它设定一个确定的高度值——当容器内内容较少时，它的实际高度是由内容撑开的，而非max-height的计算值，子元素的100%自然找不到参照基准。

两种解决思路 #

1. 给父容器补明确的height值

把父容器的height设为和max-height相同的计算值，让子元素的百分比高度有明确参照：

.fixed-container {
  position: fixed;
  width: 400px;
  top: 50px;
  height: calc(100% - 100px);
  max-height: calc(100% - 100px);
}

.list-container {
  height: 100%;
  overflow-y: scroll;
}

2. 改用Flex布局（更灵活）

不用依赖百分比高度，通过Flex布局让子容器自动占满父容器剩余空间：

.fixed-container {
  position: fixed;
  width: 400px;
  top: 50px;
  max-height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
}

.list-container {
  flex: 1;
  overflow-y: scroll;
}

补充说明 #

max-height的作用是防止元素超过某个高度，但它不会主动给元素设置高度。只有当父元素有明确的height（或者通过Flex、Grid等布局方式确定了可用空间），子元素的百分比高度才能生效。

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