Flexbox se comporte différemment lorsque les éléments enfants débordent

Question

Si le conteneur est flexible et que item2 a un débordement, le conteneur sera rendu à la taille souhaitée et la barre de défilement de débordement sera visible.

.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>

Mais lorsque je n'applique pas flexbox, le débordement ne semble pas fonctionner. Les conteneurs semblent plus adaptables au contenu. Je veux savoir pourquoi. Je me prépare à apprendre CSS. Et je n'arrivais pas à me sortir cette question de la tête.

.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

Le contenant ne s'adapte pas au contenu. Il conserve la hauteur que vous lui donnez.

Mais la hauteur des éléments enfants n'est pas limitée, ils s'agrandissent donc pour s'adapter au contenu, et comme l'élément parent n'a pas de débordement défini sur caché, ils peuvent être vus.

Voici un exemple où deux éléments enfants ont un fond légèrement transparent afin que vous puissiez voir l'arrière-plan de l'élément parent et dans ce cas il se termine légèrement en dessous du deuxième élément enfant.

.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>