百分比 'min-height' 仅在元素具有 'display: flex' 的间接父级时才有效

Question

无法理解为什么 #inner 元素只有在 #main 得到 display:flex 规则时才有它的高度。

这是我的代码：

#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

Answer 1

您面临的是与 flexbox 相关的 stretch 对齐结果。默认情况下弹性项目被拉伸，因此适用以下内容：

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved. ^ref

因此，min-height 百分比有效。如果您更改对齐方式并保持 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 网格中：

百分比 'min-height' 仅在元素具有 'display: flex' 的间接父级时才有效

Percentage 'min-height' works only when element has indirect parent with 'display: flex'

html

css

height

percentage

flexbox