Peratusan "ketinggian min" hanya digunakan jika elemen mempunyai induk tidak langsung "display: flex"

Question

Tidak faham kenapa #inner 元素只有在 #main 得到 display:flex hanya mempunyai ketinggian apabila ia berkaitan dengan peraturan.

Ini kod saya:

#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>

Jika saya keluarkan display: flex 规则 #inner ketinggian adalah sama dengan 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>

Satu lagi. Apabila #inner 内部有一些内容时，其高度将被累加为 #main ketinggian.

Tengok tangkapan skrin

Answer 1

Anda menghadapi keputusan stretchpenjajaran berkaitan flexbox. Secara lalai, item flex diregangkan, jadi perkara berikut terpakai:

Jadi min-height 正在工作。如果更改对齐方式并保留 display:flex dengan peratusan, tidak berkesan

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