如何使用flexbox滾動雙層佈局和標題？

我已經在Chrome 32中隨便使用了flexbox幾個月，並喜歡我所看到的。但現在我正在爲我的柔性版佈局推出overflow: scroll的牆。 overflow: scroll需要明確的height或min-height來知道何時開始滾動。如何使用flexbox滾動雙層佈局和標題？

當我製作一個簡單的雙層flexbox佈局時，我可以給每個窗格100％的父窗口高度，窗口高度爲100％。因此，當內容太多時，我可以使其中一個窗格滾動，而另一個窗格根本不滾動。這裏有一個例子：

http://jsfiddle.net/T5NC9/4/

但是，一旦我添加這兩個窗格之上的頭，兩個頁面獲得通過添加標題的高度下推。它看起來像以下內容並不太理想：

http://jsfiddle.net/T5NC9/5/

我想我已經得到的竅門Flexbox的和窗口的高度協同工作在簡單的情況如何。雖然Flexbox可以處理這個問題嗎？我應該看看模板佈局嗎？

注意：我已經取得了一些成功使用，例如height: 10vh爲標題和90vh爲窗格高度。但那感覺很不好。

來源

2014-02-14 David J.

有很多元素周圍，我迷路試圖追隨他們。但是，我想說flexbox系統的主要思想是*避免*設置明確的高度，最小高度等等。 * model *是基於flex的，flex-shrink和flex-grow的。如果您嘗試在柔性盒模型中使用傳統模型，恕我直言，您不會採用正確的方式。 – vals

你是說你可以在沒有min-height：0的情況下實現flexbox裏面的滾動嗎？ –

我覺得你可以只是使<body>垂直Flexbox的（display:flex;flex-direction:column），與flex: none對資產淨值和flex: 1 0px上。內容。

（這樣一來，資產淨值將獲得它的自動高度和內容吸收所有的額外空間的無需10％/ 90％的部門。）

小提琴：http://jsfiddle.net/vr5Yv/

（編輯：min-height:auto功能被重新引入後，你需要清除ID =「內容」的div，或它結束了太高。更新jsfiddle與該額外的變化：http://jsfiddle.net/vr5Yv/5/）

來源

2014-02-14 17:06:24 dholbert

太棒了，我沒有意識到'flex：none'是這個關鍵。謝謝！ –

您的小提琴在Chrome上按照預期工作，但它不*在Firefox上工作。有什麼改變？ – Pubby

是的 - '最小寬度：自動'/'最小高度：自動'功能[重新引入]（https://bugzilla.mozilla.org/show_bug.cgi?id=1015474），與ID的div '內容'的結果太高了（由於它的孩子的最小內容高度，這不認爲孩子的'溢出'）。修正了jsfiddle：http://jsfiddle.net/vr5Yv/5/ – dholbert

如何使用flexbox滾動雙層佈局和標題？

回答

相關問題