为什么设置height:100%的内层div无法占满父div的高度？

问题原因 #

• CSS 中使用百分比设置元素高度的前提是：父元素必须有显式定义的高度值作为计算基准，min-height、max-height这类限制属性不属于显式高度定义，不能作为百分比高度的计算依据。
• 你的代码里.outer只设置了min-height: 100px，没有写明确的height属性，浏览器计算.inner的height:100%时找不到合法的基准值，就会回退到height:auto，而.inner内部没有任何内容，所以最终高度为0。
• 宽度生效是因为块级元素的宽度计算逻辑和高度不同：父元素只要有确定的宽度取值（这里.outer设置了min-width:300px，宽度计算结果明确），百分比宽度就可以正常生效。

解决方案 #

方案1：给.outer添加显式高度定义 #

直接把.outer的min-height改成height，或者同时保留两个属性即可：

.outer {
  background: blue;
  height: 100px; /* 替换原有min-height，或者两个都保留也可以 */
  min-width: 300px;
}

方案2：用flex布局实现高度自适应占满 #

如果需要保留.outer的min-height特性（比如内容超出时可以自动撑开高度），可以给.outer设置flex布局：

.outer {
  background: blue;
  min-height: 100px;
  min-width: 300px;
  display: flex; /* 新增flex布局 */
}
.inner {
  background: red;
  width: 100%; /* 高度不用写，flex默认align-items:stretch会自动占满父元素高度 */
}

修改后红色的.inner就会完全覆盖蓝色的.outer。

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