如何让Flexbox占满屏幕高度并解决子元素溢出问题

问题根源 #

• 子元素硬设height:100vh，与容器的height:100%冲突，再加上body默认margin，导致出现多余空白或溢出
• 左侧区块使用固定width:30%，在flex布局下灵活性不足，且未处理内部内容溢出的情况

修改方案 #

全局代码调整

保留基础样式，补充清除body默认margin：

html {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0; /* 清除body默认margin，消除视口与容器间的空白 */
}

* {
  box-sizing: border-box;
}

Flex容器代码简化

无需重复设置高度属性，只需继承父级高度：

.container {
  display: flex;
  height: 100%; /* 继承html/body的100%高度 */
}

子元素代码修改

移除硬编码的height:100vh，利用flex特性让子元素自动占满容器高度，同时处理左侧溢出：

.largesection {
  padding: 5px;
  border-radius: 4px;
  flex: 1; /* 自动填充容器剩余宽度 */
  background-color: #f6f6f7;
}

.smallsection {
  background-color: #fff;
  padding: 25px 0 30px;
  width: 30%;
  border-right: 1px solid #e1e3e5;
  overflow-y: auto; /* 内部内容溢出时显示垂直滚动条 */
}

关键修改说明 #

• 清除body默认margin，彻底消除容器边缘的多余空白
• 容器仅保留height:100%，确保与视口高度完全匹配
• 子元素移除height:100vh，依赖flex布局自动填充容器高度，避免高度冲突
• 右侧区块使用flex:1替代固定width:100%，自适应容器剩余空间
• 左侧区块添加overflow-y:auto，当内部内容超出区块高度时，自动显示滚动条解决溢出问题

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