Der Prozentsatz „min-height' gilt nur, wenn das Element ein indirektes übergeordnetes Element von „display: flex' hat.

Question

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

Answer 1

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

因此，带有百分比的 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
}

  

    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.