为何当min-height大于height时，min-height未被正确识别？

问题场景 #

需要实现如下布局：

• .page 容器高度为页面可用高度（因顶部有菜单栏，无法用vh等绝对单位，示例中用固定400px模拟），内容溢出时可滚动
• .container 带内边距，包裹卡片元素
• .inner 作为卡片容器，内容不足时撑满.page高度，内容过多时随内容自动拉伸
  当前设置min-height:100%无效，卡片无法撑满容器高度。

问题代码示例 #

CSS #

.page {
  height: 400px;
  border: 2px solid black;
  overflow: auto;
}

.container {
  height: fit-content;
  min-height: 100%;
  border: 2px solid green;
  padding: 1rem;
}

.inner {
  min-height: 100%;
  height: fit-content;
  border: 2px solid red;
}

.content {
  height: 200px;
  background-color: rgba(50, 50, 50, .2);
}

* {
  box-sizing: border-box;
}

HTML #

<div class="page">
  <div class="container">
    <div class="inner">
      <div class="content"></div>
    </div>
  </div>
</div>

解决方案 #

核心用Flexbox布局替代百分比高度——百分比高度依赖父元素明确的高度上下文，而Flex布局可自动处理空间分配，完美适配「内容不足撑满，内容过多拉伸」的需求：

1. 给.page添加display: flex，让子元素.container自动填充其可用高度
2. 修改.container：去掉height: fit-content和min-height: 100%，添加flex: 1和display: flex，使其填充.page高度同时允许内部元素自适应
3. 修改.inner：去掉min-height: 100%和height: fit-content，添加flex: 1，让它填充.container的可用高度，内容过多时自动拉伸

修改后的完整代码 #

CSS #

.page {
  height: 400px;
  border: 2px solid black;
  overflow: auto;
  display: flex; /* 新增 */
}

.container {
  flex: 1; /* 替换原有高度设置 */
  border: 2px solid green;
  padding: 1rem;
  display: flex; /* 新增 */
}

.inner {
  flex: 1; /* 替换原有高度设置 */
  border: 2px solid red;
}

.content {
  height: 200px;
  background-color: rgba(50, 50, 50, .2);
}

* {
  box-sizing: border-box;
}

HTML #

<div class="page">
  <div class="container">
    <div class="inner">
      <div class="content"></div>
    </div>
  </div>
</div>

验证效果：

• 当.content高度小于.page高度时，.inner会撑满.page的高度
• 当.content高度大于.page高度时，.page会出现滚动条，.inner随内容拉伸

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