CSS百分比高度容器设overflow:auto时溢出父卡片问题排查

你的样式存在两个核心缺陷，直接导致百分比高度规则失效、容器被内部内容撑大：

1. CSS中百分比高度的生效有明确前提：父级元素必须存在可计算的、受约束的固定高度。你给.list-container设置了height: 29%，但父容器.card-body没有设置固定高度约束，浏览器无法计算29%对应的实际像素值，只能按内部内容的自然高度渲染容器尺寸，容器自然会被内容撑大。你写的max-height: 29%同理，在父元素无固定高度时完全不生效。
2. 你给列表容器设置了display: inline-block，行内块元素的默认尺寸计算逻辑会优先适配内部内容大小，进一步放大了高度失效的问题。当三个容器加上各自的底部外边距总高度超出卡片的可用高度后，底部按钮就会被挤出卡片区域。

按以下两点调整样式即可完全解决问题：

• 首先给父容器.card-body设置明确的固定高度，同时开启border-box盒模型，避免内边距额外撑大容器，保证父容器本身高度不会被子元素影响：

.card-body {
    /* 按你的卡片设计需求设置具体高度值即可，如果要使用百分比高度，需要保证更上层的父元素有明确固定高度 */
    height: 420px;
    padding: 12px;
    box-sizing: border-box;
}

• 修改.list-container的display属性，将inline-block改为block，块级元素可以正确识别父容器的高度约束，同样给列表容器加上盒模型规则，避免阴影、边框带来的尺寸溢出：

.list-container {
    height: 29%;
    width: 100%;
    display: block;
    overflow: auto;
    box-shadow: 0 0 7px darkgray;
    margin-bottom: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

调整后三个列表容器各占父容器29%高度，总高度占比87%，剩余的高度空间刚好可以容纳三个列表的底部外边距和底部按钮区域。当列表内容超出容器高度时，会自动在容器内部生成滚动条，不会再撑开容器、挤出底部按钮。

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