Le pourcentage "min-height" ne s'applique que si l'élément a un parent indirect de "display: flex"

Question

Je ne comprends pas pourquoi #inner 元素只有在 #main 得到 display:flex n’a sa hauteur qu’en matière de règles.

Voici mon code :

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

Si je supprime display: flex 规则 #inner la hauteur est égale à 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>

Encore une chose. Quand #inner 内部有一些内容时，其高度将被累加为 #main hauteur.

Regardez la capture d'écran

Answer 1

Vous êtes confronté au résultat de stretchalignement lié à la flexbox. Par défaut, les éléments flexibles sont étirés, ce qui suit s'applique :

Donc min-height 正在工作。如果更改对齐方式并保留 display:flex avec un pourcentage, ça ne marche pas

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