Flexbox在子元素溢出時的行為有所不同

Question

如果容器是flex並且item2有overflow，容器將渲染為期望的大小，並且溢出滾動條可見。

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

但是當我不應用flexbox時，overflow似乎不起作用。容器似乎更適應內容。我想知道為什麼。我正準備學習CSS。而且我無法從腦海中擺脫這個問題。

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