如何在全高 Flexbox 應用程式中啟用垂直捲動？

在全高應用程式中結合 Flexbox 和垂直捲動

問題：

使用建立全高應用程式設計flexbox同時啟用垂直

討論：

使用最新的 Flexbox 屬性，可以實現全高度的應用佈局。然而，添加垂直滾動可能具有挑戰性。

使用過時的 Flexbox 版面配置（例如，display: box）的初始方法對於僅支援舊版的瀏覽器是可行的。

解決此問題問題，有人提出了一個 hack，其中涉及將容器的高度設定為 0px。雖然此解決方法解決了滾動問題，但它會產生新問題。

解決方案：

理想的解決方案是為 Flexbox 佈局中的可滾動元素設定高度。預設情況下，flexbox 會計算其元素的高度，因此 0px 的高度將有效地啟用垂直滾動。

如果需要最小高度，可以使用min-height 代替，例如min-height: 100px .

程式碼範例：

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* or min-height: 100px */
}

程式碼範例：

程式碼範例：

程式碼範例：程式碼範例種方法可確保可捲動元素具有高度，同時允許Flexbox 動態重新計算它。 更新的 Fiddle：[更新的 JSFiddle](http://jsfiddle.net/ ch7n6/867/) 示範了最終的解決方案。

以上是如何在全高 Flexbox 應用程式中啟用垂直捲動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！