Flexbox behaves differently when child elements overflow

Question

If the container is flex and item2 has overflow, the container will be rendered to the desired size and the overflow scrollbar will be 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>

But when I don't apply flexbox, overflow doesn't seem to work. Containers seem to be more adaptable to content. I want to know why. I'm getting ready to learn CSS. And I couldn't get this question out of my head.

.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

The container has no adapted content. It maintains the height you give it.

But the height of the child elements is not limited, so they become larger to fit the content, and since the parent element does not set overflow-y to hidden, they can be seen.

Here is an example where two child elements have a slightly transparent background so that you can see the background of the parent element and in this case it ends slightly below the second child element.

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