仅当元素具有间接父级且显示：FLEX&#39；时，百分比&#39；最小高度&#39；才起作用。 [英] Percentage 'min-height' works only when element has indirect parent with 'display: 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-heightWITH 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&#39；时，百分比&#39；最小高度&#39；才起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！