本文介绍了仅当元素具有间接父级且显示:FLEX';时,百分比';最小高度';才起作用。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
无法理解为什么仅当#main
获得display:flex
规则时,#inner
元素才有其高度。
以下是我的代码:
#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>
如果删除display: flex
#inner
的规则高度等于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>
还有一件事。
当#inner
内部有内容时,其高度合计为#main
高度。
Take a look to the screenshot
推荐答案
您面临的是与FlexBox相关的stretch
对齐结果。默认情况下,弹性项处于拉伸状态,因此以下情况适用:
为此,如果弹性项有
align-self: stretch
,请重做其内容的布局,将此已用大小视为其确定的交叉大小,以便可以解析百分比大小的子项。ref
min-height
WITH PENTERATION正在运行。如果更改对齐方式并保留display:flex
,它将不起作用
#main {
display: flex
}
#wrapper {
background-color: violet;
align-self:flex-start;
}
.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>
您还应该注意到,您的第一个示例中存在溢出,因为百分比与内容相关,所以您要添加的任何内容都多于内容本身。
添加边框以注意这一点
#main {
display: flex
}
#wrapper {
background-color: violet;
border:5px solid red;
}
.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>
CSS网格中也会发生类似的行为:Why does `height: 100%` value 'work' for child tags of grid-items?
这篇关于仅当元素具有间接父级且显示:FLEX';时,百分比';最小高度';才起作用。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!