使用 flexbox 的可滾動全高 div

Question

我正在嘗試創建如下所示的布局。

問題是左側菜單。 我想使用全高 - 我得到了這個工作。 問題是當有太多項目時。 然后我想要一個溢出滾動。 所以整個頁面應該總是填滿整個屏幕，但頁面不應該是可滾動的。 只是左側菜單部分。

我這里有一個 CodePen。 它可以按我的意願工作，直到菜單中有太多項目並且我可以讓溢出滾動以良好的響應方式工作。

取消注釋 javascript window 中的 items = 40 行以查看問題。

items = 4 // looks ok
//items = 40 // too long

有沒有一種很好的技術可以讓這個工作？

Answer 1

你所缺少的只是overflow: auto; 在您的.menu-items class 上。