如何让子元素继承父元素高度？百分比设置无效问题排查

为什么百分比高度不生效？ #

CSS里子元素的百分比高度，必须依赖父元素有明确的数值高度（比如px、rem这类固定值），或者父元素处于Flex/Grid布局上下文里。你给父元素.wrapper设的height: fit-content是自适应高度，它的高度完全由内部内容撑起来，没有一个可被计算的固定基准值，所以子元素的height: 50%会被浏览器忽略，直接用默认的height: auto（即撑满自身内容高度），哪怕设999%也不会有变化。

可行的解决方法 #

方法1：给父元素设置固定数值高度（适合高度确定的场景）

如果可以接受父元素高度固定，把fit-content换成具体数值即可：

.wrapper {
    height: 400px; /* 替换为你需要的固定高度 */
    width: fit-content;
    border: red solid 2px;
}

.text-container {
    height: 50%;
    border: green solid 2px;
}

方法2：用Flex布局（推荐自适应场景）

给父元素开启Flex布局，既能保留父元素的内容自适应特性，又能让子元素的百分比高度生效：

.wrapper {
    display: flex;
    flex-direction: column; /* 保持子元素垂直排列 */
    height: fit-content;
    width: fit-content;
    border: red solid 2px;
}

.text-container {
    height: 50%;
    border: green solid 2px;
    overflow: auto; /* 子内容超出高度时显示滚动条，可选 */
}

方法3：用Grid布局

和Flex原理类似，开启Grid后子元素百分比高度可正常计算：

.wrapper {
    display: grid;
    height: fit-content;
    width: fit-content;
    border: red solid 2px;
}

.text-container {
    height: 50%;
    border: green solid 2px;
    overflow: auto; /* 可选，处理内容溢出 */
}

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