Flexbox verhält sich anders, wenn untergeordnete Elemente überlaufen

Question

Wenn der Container flexibel ist und Element2 einen Überlauf hat, wird der Container auf die gewünschte Größe gerendert und die Überlauf-Bildlaufleiste wird sichtbar.

.Flex_container {
      width: 300px;
      height: 100px;
      display: flex;
      flex-direction: column;
    }

   .item1 {
     color: white;
     background-color: black;
   }

   .item2 {
     color: white;
     background-color: brown;
     overflow: auto;
   }

     <div class="Flex_container">
       <div class="item1">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
        </div>
        <div class="item2">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
        </div>
     </div>

Aber wenn ich Flexbox nicht anwende, scheint der Überlauf nicht zu funktionieren. Container scheinen sich besser an den Inhalt anpassen zu können. Ich möchte wissen, warum. Ich bereite mich darauf vor, CSS zu lernen. Und diese Frage ging mir nicht mehr aus dem Kopf.

.container {
      width: 300px;
      height: 100px;
    }

   .item1 {
     color: white;
     background-color: black;
   }

   .item2 {
      color: white;
     background-color: brown;
     overflow: auto;
   }

     <div class="container">
       <div class="item1">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
        </div>
        <div class="item2">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
        </div>
     </div>

Answer 1

容器没有适应内容。它保持了您给定的高度。

但是子元素的高度没有受到限制，因此它们会变大以适应内容，并且由于父元素没有设置overflow-y为hidden，所以它们可以被看到。

这里有一个示例，其中两个子元素具有稍微透明的背景，这样您就可以看到父元素的背景，并且在这种情况下，它在第二个子元素下方稍微结束。

.container {
  width: 300px;
  height: 100px;
  background: magenta;
}

.item1 {
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
}

.item2 {
  color: white;
  background-color: rgba(0, 0, 255, 0.4);
  overflow: auto;
}

<div class="container">
  <div class="item1">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
  </div>
  <div class="item2">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua. At vero eos et at.</p>
  </div>
</div>