如何使用Flexbox让HTML Body随溢出内容自动扩展？

问题根源 #

当前布局的核心问题：

• .nav-container设置了固定的height:100vh，强制容器高度等于视口高度，当nav-content内容超出视口时，容器无法自动拉伸，导致内容溢出
• 未给html和body设置适配的基础高度样式，无法支撑内容高度超出视口的场景

修复方案 #

对CSS做以下调整即可解决：

1. 给html和body设置min-height:100vh，确保页面至少铺满视口，同时能随内容自动扩展
2. 将.nav-container的height:100vh改为min-height:100vh，让容器默认保持视口高度，内容超出时自动拉伸
3. 可选：移除或保留body的边框样式，根据需求调整

修改后的CSS代码 #

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    border: 10px solid blue; /* 可按需保留或删除 */
}

.nav-container {
    width: 100%;
    min-height: 100vh; /* 替换原固定height属性 */
    background: #b2bdbd;
    display: flex;
}

.sidenav {
    width: 200px;
    padding-left: 10px;
    background: yellow;
}

.nav-content {
    width: 100%;
    background: green;
}

补充说明 #

• min-height替代固定height是核心，兼顾了"内容不足时铺满视口"和"内容过多时自动扩展"的需求
• Flex布局下，.sidenav会自动和.nav-container的高度保持一致，无需额外设置flex-grow
• 重置html和body的默认margin、padding可避免布局出现不必要的滚动条或间隙

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