React flex布局纵向缩小时容器溢出灰色区域如何解决

问题原因 #

你遇到的flex容器溢出问题核心是：父容器设定了固定高度后，默认overflow属性为visible，内容高度超出容器高度时不会被裁剪，也不会触发滚动，因此会直接显示在父容器范围外，这也是你只修改height属性不生效的原因。

解决方案 #

只需修改styles.css里的两处样式即可解决：

1. 给.App容器添加溢出隐藏规则，限制整体内容不超出视口范围

.App {
  text-align: center;
  background-color: #f6f7f7;
  border: 1px solid grey;
  height: 100vh;
  overflow: hidden; /* 新增规则 */
}

2. 给内容容器.App__main添加溢出滚动规则，内容超出高度时自动展示滚动条

.App__main {
  display: flex;
  height: 100%;
  overflow: auto; /* 新增规则 */
}

如果需要保留导航栏预留的32px顶部间距，可以把你定义的.App__spacing类加到.App__main的div上即可。

修改后所有内容都会限制在灰色的.App容器内，纵向缩小页面时会在内容区域出现滚动条，不会再出现溢出问题。

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