Flex布局中百分比高度导致布局异常的解决方案咨询

问题核心：main通过flex-grow:1获取父容器剩余空间时，自身没有明确的高度基准值，导致子元素#main-card的height:80%无法正确计算参考高度。

解决方法（二选一即可） #

1. 给main添加height: 0或min-height: 0，打破flex容器默认的最小高度限制：

body main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 0; /* 或者 min-height: 0; */
}

2. 用flex: 1替代flex-grow:1，flex:1是flex-grow:1, flex-shrink:1, flex-basis:0的简写，会让main以0为基准高度分配剩余空间：

body main {
  flex: 1; /* 替代flex-grow:1 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

修改后的完整CSS代码 #

body {
  background: #f1f1f1;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body main #main-card {
  height: 80%;  
  overflow-y: auto;
  background: green;
  padding: 20px;
  width: 400px;  
}

body main #main-card #main-card-content {
  background: #bf8040;
  height: 150vh;
}

body header {
  width: 100%;
  height: 50px;
  background: red;
}

原理说明 #

flex容器默认给子元素设置min-height: auto，即子元素高度至少容纳自身内容。当main仅用flex-grow:1时，虽然它会占据剩余空间，但自身高度并未被明确绑定为该空间高度，导致子元素的百分比高度找不到有效参考值。添加height:0/min-height:0或使用flex:1（设置flex-basis:0），会强制main的高度基于分配的剩余空间计算，子元素的百分比高度就能正确参考这个值。

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