Kann nicht verstehen, warum #inner
元素只有在 #main
得到 display:flex
nur in Sachen Regeln seinen Höhepunkt erreicht.
Das ist mein 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>
Wenn ich display: flex
规则 #inner
entferne, ist die Höhe gleich 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>
Noch etwas.
Wenn #inner
内部有一些内容时,其高度将被累加为 #main
Höhe.
Sehen Sie sich den Screenshot an
您面临的是与flexbox相关的
stretch
对齐的结果。默认情况下,弹性项目会被拉伸,因此以下内容适用:因此,带有百分比的
min-height
正在工作。如果更改对齐方式并保留display:flex
,则不起作用