父元素设min-height时，子元素百分比高度适配及父元素自适应问题

问题场景 #

已把html、body、#root设为height:100%，给.App容器加了min-height:100%和绿色背景，但子元素.something设height:150%完全没效果。后来给.App加了height:1px，子元素的百分比高度终于生效了，但.App容器又没法跟着子元素的150%高度自动扩展，卡在了100%视口高度的大小。

解决思路与方案 #

问题根源在于：CSS里子元素的百分比高度，必须依赖父元素有明确的高度值，但min-height并不能被当作这个“明确高度”来识别；可一旦给父元素设了固定height，它又没法随子元素高度撑开。下面是几种可行的解决办法：

方案1：用CSS Grid（最推荐） #

给.App加上display: grid，这样子元素的百分比高度会自动基于min-height的基准计算，同时.App会自适应子元素的高度：

.App {
  min-height: 100%;
  display: grid;
  background-color: green;
}

方案2：用Flexbox布局 #

给.App设置display: flex和垂直方向排列，子元素的百分比高度就能正常生效，同时容器会被撑开：

.App {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.something {
  height: 150%;
  width: 50%;
  background-color: blue;
}

方案3：用height: fit-content（现代浏览器适用） #

给.App同时设置min-height:100%和height: fit-content，既保证容器至少占满视口高度，又能随子元素高度扩展：

.App {
  min-height: 100%;
  height: fit-content;
  background-color: green;
}

完整代码示例（Grid方案） #

/* Resetting margin */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
}

.App {
  min-height: 100%;
  display: grid;
  background-color: green;
}

.something {
  height: 150%;
  width: 50%;
  background-color: blue;
}

<html>
  <body>
    <div id="root">
      <div class="App">
        <div class="something"></div>
      </div>
    </div>
  </body>
</html>

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