「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.