如何讓 Flexbox 內容區域獨立捲動，同時允許子元素溢出？

滾動內容溢出的 Flexbox

問題：

考慮以下版面：

問題：

考慮以下版面：

[圖片佈局]當內容區域溢出時，整個頁面滾動，而不僅僅是內容區域本身。對內容div應用overflow: auto解決了這個問題，但會導致列的邊框被切斷。

問題：

內容區域如何設定為獨立滾動，同時允許其子項超出內容框的範圍高度？

答案：

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

根據Flexbox 規範的作者Tab Atkins 的說法，可以使用以下方法：

以上是如何讓 Flexbox 內容區域獨立捲動，同時允許子元素溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！