HTML/CSS实现子元素高度增加时父容器高度自适应

这个问题我之前也碰到过，核心原因是你给.container设置了height: 100%——这会把它的高度死死限制在父元素（也就是html/body的100vh）里，哪怕子元素.right的高度远超这个值，容器也不会自动撑开，只会让超出的部分溢出，出现滚动条。

修复方案 #

最简单的解决办法是把.container的height: 100%替换成min-height: 100%。这样容器的高度会取「视口高度」和「子元素总高度」中的较大值：

• 当子元素高度小于视口时，容器会占满整个视口；
• 当子元素高度超过视口时，容器会自动拉伸以匹配子元素的高度。

修改后的完整代码 #

CSS代码

html, body { margin:0px; padding:0px; height: 100vh; background-color: gray; }
.container { display: flex; width: 100%; min-height: 100%; /* 关键修改 */ background-color: red; }
.left { flex: 0.5; height: 500px; background: blue; }
.right { flex: 0.5; height: 1300px; background: green; }

HTML代码（无需修改）

<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

额外说明 #

如果你的场景不需要容器强制占满视口（比如内容本身就足够长），甚至可以直接删除.container的height属性，让它完全由子元素的高度来决定。不过大多数情况下，min-height: 100%是更稳妥的选择，能兼顾内容多少两种场景。

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