Flexbox子元素无法撑满高度？问题排查与解决

问题重现代码 #

HTML：

<div class="box">
  <div class="image" style="background-image: url('<url>')"></div>
  <div class="content">
    <p>This is some content</p>
    <p>This is some more content</p>
  </div>
</div>

原CSS：

.box {
  display: flex;
  flex-direction: row;
}

.image {
  width: 50%;
  height: 100%;
  min-height: 100%
}

.content {
  width: 50%;
}

问题描述 #

.image容器始终无法撑满父容器.box的高度，只有给.box设置固定高度才能生效，但内容是动态的，不想固定高度。尝试过设置min-height、调整justify-content: stretch、给.image加flex-grow: 1都没有效果。

解决方案 #

问题根源在于.image设置了height: 100%，将其改为height: auto后，Flexbox会自动完成高度适配：

.image {
  width: 50%;
  height: auto; /* 替换原来的height:100% */
}

原理说明 #

在Flex布局中，父容器.box没有明确高度时，子元素设置height:100%没有可参考的高度基准，无法自适应父容器的动态高度。而将height设为auto后，Flex布局默认的align-items: stretch属性会生效，让.image自动填充父容器的高度，完美适配动态内容的高度变化。

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