CSS设置min-height:100%无法填充父元素高度问题求助

问题原因 #

CSS中，百分比高度（包括min-height:100%）的计算依赖于父元素的计算高度，而父元素仅设置min-height时，其计算高度由内部内容决定（内容不足时等于min-height，但CSS不会将min-height作为百分比高度的参考基准）。同时，嵌套结构里的中间层级元素未建立有效高度上下文，导致子元素无法继承父容器的最小高度。

解决方案 #

用flex布局替代百分比高度方案，flex子项默认会拉伸填充父容器高度，无需依赖百分比计算，更适配min-height的场景。修改后的代码如下：

修改后的CSS #

:root {
    --poke-main: #e05e8e;
    --poke-secondary: #f5ecc5;
    --poke-tertiary: #b5255a;
}

.card {
    border-color: var(--poke-tertiary);
}

.poke_tab {
    border-radius: .25rem;
    background-color: var(--poke-main);
    color: var(--poke-secondary);
    flex: 1; /* 填充父容器剩余空间 */
}

#carousel {
    min-height: 250px;
    background-color: yellow;
    display: flex; /* 开启flex布局，让子元素能填充高度 */
}

.poke_container, .carousel-inner {
    flex: 1; /* 每个嵌套层级都填充父容器 */
    display: flex;
}

.poke_tab .card {
    height: 100%; /* 让card填充poke_tab的高度 */
    background-color: var(--poke-secondary);
    color: var(--poke-tertiary);
}

对应的HTML（无需修改） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="carousel" class="col-lg-10" >

  <!-- Infobox -->
  <div class="poke_container">
    <div class="carousel-inner">
      <!-- Log Tab -->
      <div class="poke_tab p-2">
        <div class="card">
          test
        </div>
      </div>
    </div>
  </div>
</div>

替代方案（若必须用百分比高度） #

如果坚持使用min-height:100%，需要给父链的每个元素都设置height:100%，同时将最外层的#carousel改成固定高度：

#carousel {
    height: 250px; /* 改为固定高度 */
    background-color: yellow;
}

.poke_container, .carousel-inner, .poke_tab, .poke_tab .card {
    height: 100%; /* 每个层级都设置高度 */
}

该方案局限性是父容器无法根据内容自动扩展高度，仅适用于固定高度场景。

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