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

Posted 2023-03-06

【中文标题】百分比 \'min-height\' 仅在元素具有带有 \'display: flex\' 的间接父级时才有效

【英文标题】：Percentage 'min-height' works only when element has indirect parent with 'display: flex'百分比 'min-height' 仅在元素具有带有 'display: flex' 的间接父级时才有效

【发布时间】：2021-12-13 18:00:32

【问题描述】：

不明白为什么#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

【参考方案1】：

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

如果弹性项目有align-self: stretch，重做其内容的布局，将此使用的大小视为其确定的交叉大小，以便可以解决百分比大小的子项 . ^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 Grid 中：Why does `height: 100%` value 'work' for child tags of grid-items?