Le pourcentage "min-height" ne s'applique que si l'élément a un parent indirect de "display: flex"
P粉041758700
P粉041758700 2024-03-30 22:28:53
0
1
466

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

P粉041758700
P粉041758700

répondre à tous(1)
P粉066224086

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.
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal