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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:flexavec 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 }