CSS3 Flexbox全高應用程序和溢出

Question

我有一個應用程序使用類似下面的佈局的經典電子郵件。

我已經使用新的CSS3 Flexbox的模型構建，它工作出色，直到我添加爲用戶的文件夾對話框動態添加新項目的能力。我希望flexbox能夠以這樣的方式工作，只要文件夾框中留有空間，它就不會開始增長到下面的任務框中。不幸的是，這不是我所看到的（在Chrome 17中）。

我已經構建了一個JSFiddle here來演示這個問題。只需點擊添加文件夾鏈接，您將看到文件夾框越來越大，即使它有足夠的空間容納新的孩子。

回答這個問題。我怎樣才能用flexbox構造兩個垂直對齊的盒子，這樣一個盒子就佔據了可用高度的三分之二（box-flex 2），另外三分之一（box-flex 1）並且他們這樣做以這種方式，當新內容被添加到第一個盒子時，它不會開始增長，直到它沒有空間。

Answer 1

我不能肯定地說，如果這是一個瀏覽器錯誤，或者它實際上是如何Flex模型應該工作。如果這是它應該如何工作，我會同意這不完全直觀！

我找到了一個解決方法，將列表放在一個絕對定位的div中，溢出設置爲auto。這允許彈性盒保持它們的原始狀態，並且只有當重新計算整個佈局而不是內容改變時才改變。

下面是更新標記：

<section id="folders"> 
    <div class="dynamicList"> 
    <h2>Folders</h2> 
    <ul> 
     <li>Folder 1</li> 
     <li>Folder 2</li> 
    </ul> 
    <a href="#" id="add">Add Folder</a> 
    </div>  
</section> 

和更新的CSS：

#left #tasks, 
#left #folders { 
    position: relative; 
} 

.dynamicList { 
    bottom: 0; 
    left: 0; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

我分叉的小提琴這裏演示： http://jsfiddle.net/MUWhy/4/

UPDATE：

如果你希望標題保持不變，只有文件夾和任務列表的內容滾動，那麼我會考慮將標題和添加按鈕放在#left div內的固定高度框中。這是一個更大的標誌，但仍然非常簡單。我沒有嘗試過JSFiddle，但我認爲這將是最好的路線。

Answer 2

我更喜歡這個解決方案給Jim，因爲它沒有黑客 - 它可以在頁面任何部分的任何flexbox上工作。 Jim's只能在頁面左上方的框中工作。

我解決了這個問題，通過包裹我想要在div.scrollbox內滾動的彈性盒部分。我讓這個div的直接子元素的高度爲0，因此在其中添加額外的元素不會影響其餘的佈局。我還將其overflow-y設置爲auto，這樣如果其子項超出其界限，就會出現滾動條。

.scrollbox { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
} 
.scrollbox > * { 
    height: 0; 
} 

請注意，這隻有在可擴展內容放置在包含元素或包含元素的情況下才有效。在此示例中，li元素包含在包含ul元素中，因此它可以工作。

爲了讓左上方的flexbox的3個組件正確排列，我還必須進行一些更改，但這是應用程序特定的。

#folders { 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
} 
#folders h2, #folders #add { 
    -webkit-flex: 0 1 auto; 
} 

我在上面分出了這個jsfiddle：http://jsfiddle.net/FfZFG/。

Answer 3

我已經得到了我的其他問題這個答案是相同或多或少：https://stackoverflow.com/a/14964944/1604261

代替@LukeGT解決方案，這是一種解決方法，而不是解決方案獲得的效果，你可以申請您想要看到垂直滾動的元素的高度。

所以最好的解決辦法如果你想在垂直滾動一個最小高度：

#container article { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 100px; 
} 

如果你只是想萬一完全垂直滾動沒有足夠的空間裏看到的文章：

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

如果不設置高度（使用高度或最小高度）垂直滾動不會被設置。在所有情況下，即使使用height：0px;元素的計算高度將不同於零。

我的解決方案與-webkit前綴：http://jsfiddle.net/ch7n6/4/

編輯：

由於火狐現在支持完整的Flexbox的規範，消除-webkit-供應商名稱將與所有的瀏覽器。