如何阻止flexbox容器自动撑大，内容超出时改为显示滚动条

问题原因 #

flex布局的子元素默认min-height值为auto，该规则会让flex子元素的高度优先匹配内部内容的高度，不会被父容器限制尺寸，因此即使你给内部容器设置了overflow: auto，也不会触发滚动条，反而会把外层容器撑大。你之前只配置了flex-basis和flex-grow，没有覆盖默认的min-height规则，所以配置不生效。

解决方案 #

只需要在两个flex子元素上添加min-height: 0配置即可，无需设置固定高度：

1. 给.MainPage添加min-height: 0，它是.App（竖向flex容器）的子元素
2. 给.Sidebar添加min-height: 0，它是.MainPage（横向flex容器）的子元素

修改后的完整CSS代码如下：

.App {
  background-color: black;
  display: flex;
  flex-direction: column;
  flex: 1;
}
    
.Nav {
  flex: 1;
}
    
.MainPage {
  display: flex;
  flex: 1;
  background-color: turquoise;
  min-height: 0; /* 新增规则 */
}
    
.Sidebar {
  flex: 1;
  background-color: thistle;
  display: flex;
  min-height: 0; /* 新增规则 */
}
    
.LinksToOtherMessagesFromUser {
  margin: 3vh;
  flex: 1; /* 等价于flex-grow:1; flex-shrink:1; flex-basis:0; */
  background-color: blue;
  overflow: auto;
}
    
.Message {
  background-color: violet;
  flex: 1;
}
    
body {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

修改后内部内容超出时会自动在LinksToOtherMessagesFromUser容器上出现滚动条，外层容器不会被撑大，高度完全基于父元素的分配比例，不需要设置固定max-height。

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