“min-height”百分比仅在元素具有“display: flex”的间接父元素时适用

Question

无法理解为什么 #inner 元素只有在 #main 得到 display:flex 规则时才具有其高度。

这是我的代码：

#main {
  display: flex
}

#wrapper {
  background-color: violet
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

如果我删除 display: flex 规则 #inner 的高度等于 0:

#main {
/*   display: flex */
}

#wrapper {
  background-color: violet
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

还有一件事。 当 #inner 内部有一些内容时，其高度将被累加为 #main 高度。

看一下截图

Answer 1

您面临的是与flexbox相关的stretch对齐的结果。默认情况下，弹性项目会被拉伸，因此以下内容适用：

因此，带有百分比的 min-height 正在工作。如果更改对齐方式并保留 display:flex，则不起作用

#main {
  display: flex
}

#wrapper {
  background-color: violet;
  align-self:flex-start;
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>