Div未占满父容器高度：flex-grow设置无效的解决方案求助

问题根源 #

核心问题出在布局规则的适配性上：

• Root容器默认是display:block，设置的height:100%依赖父元素（如body/html）的明确高度，否则无法生效，仅min-height:350px会起作用；
• Parent作为Block容器的子元素，height:100%无法正确继承Root的min-height值，自然无法占满350px高度；
• 之前添加flex-grow:1无效，是因为当时Parent的父容器（Root）不是Flex容器——flex-grow属性仅对Flex容器的直接子元素生效。

解决方案 #

将Root容器改为Flex容器，让Parent通过flex-grow:1自动填充Root的全部高度，同时保留Root的min-height限制。具体修改如下：

修改后的CSS代码

/* 可选：确保html和body提供基础高度支撑，让Root的height:100%在视口足够大时生效 */
html, body {
  height: 100%;
  margin: 0;
}

.root {
  min-height: 350px;
  width: 100%;
  /* 将Root设为Flex容器，为子元素提供flex布局环境 */
  display: flex;
}

.parent {
  display: flex;
  flex-direction: column;
  /* 让Parent占满Root的全部可用空间 */
  flex-grow: 1;
  /* 移除原有的height:100%，flex-grow更适配动态高度场景 */
}

.item {
  /* 若需要Item也均分Parent的高度，可添加此属性 */
  flex-grow: 1;
}

HTML代码（无需修改）

<div class="root">
    <div class="parent">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
</div>

关键说明 #

1. Root设为Flex容器：这是让flex-grow生效的前提，Parent作为Flex子元素，会自动填充Root的所有可用空间，包括min-height:350px定义的最小高度。
2. 移除Parent的height:100%：在Flex布局中，flex-grow比固定height更适配动态高度场景，尤其是当Root的高度由min-height控制时。
3. 可选的html/body高度设置：如果希望Root在视口高度大于350px时占满视口，需要给html和body设置height:100%并清除默认边距。

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