“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
}

  

    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.