縮小以適應flexbox或flex-basis中的內容：內容解決方法？

Question

我有一個webapp，我使用flexbox進行布局。

我試圖填充屏幕（它是一個應用程序，而不是文檔），並盡可能不指定任何固定的寬度或高度，因為內容可能是各種各樣的事情（完全流暢的布局！夢想！）

所以我需要流體高度，全寬頁眉和頁腳，然后在中間的主面板填充剩余的垂直空間，分成列，每個列在太高時滾動，並且每個非主列的寬度應縮小適合其內容，以及用盡剩余空間的主要列。

我是如此接近，但不得不求助於明確調整非主要列 - 我相信flex-basis: content; 應該這樣做但瀏覽器還不支持。

這是一個顯示固定大小列的最小演示 ：

 var list = document.querySelector('ul') for (var i = 0; i < 100; i++) { var li = document.createElement('li') li.textContent = i list.appendChild(li) } 

 html, body { height: 100%; width: 100%; margin: 0; } body { display: flex; flex-direction: column; } main { display: flex; flex-direction: row; overflow: hidden; } main > section { overflow-y: auto; flex-basis: 10em; /* Would be better if it were fluid width/shrink to fit, unsupported: */ /* flex-basis: content; */ } main > section:last-child { display: flex; flex: auto; flex-direction: column; } main > section:last-child > textarea { flex: auto; } 

 <header> <h1>Heading</h1> </header> <main> <section> <h1>One</h1> <ul> </ul> </section> <section> <h1>Two</h1> </section> <section> <header> <h1>Three</h1> </header> <textarea></textarea> <footer> <p>Footer</p> </footer> </section> </main> <footer> <p>Footer</p> </footer> 

它看起來像這樣-我要列一 ， 二收縮/成長，以適應，而不是固定的：

我的問題是，是否存在基於靈活性的CSS解決方法flex-basis: content ，或實現此目標的替代方法？

我可能會像上面那樣修復列大小，或者使用javascript，但我有一個夢想。

Answer 1

我希望第一列和第二列縮小/增長以適應而不是固定。

你試過嗎： flex-basis: auto

或這個：

flex: 1 1 auto ，這是以下內容的縮寫：

• flex-grow: 1 （按比例增長）
• flex-shrink: 1 （按比例縮小）
• flex-basis: auto （基於內容大小的初始大小）

或這個：

main > section:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:last-child {
    flex: 20 1 auto;
    display: flex;
    flex-direction: column;  
}

修訂演示

有關：

• 使flex項目占用內容寬度，而不是父容器的寬度
• 使flex容器占用內容寬度，而不是寬度100％

Answer 2

事實證明，它正在縮小並正確地增長，一直提供所需的行為; 除了在所有當前瀏覽器中，flexbox沒有考慮垂直滾動條！ 這就是內容似乎被切斷的原因。

你可以在這里看到，這是我在添加固定寬度之前使用的原始代碼，看起來這個列沒有增長以容納文本：

http://jsfiddle.net/2w157dyL/1/

但是，如果您使該列中的內容更寬，您將看到它總是將其剪切相同的量，即滾動條的寬度。

所以修復非常非常簡單 - 添加足夠的右邊填充來計算滾動條：

http://jsfiddle.net/2w157dyL/2/

  main > section { overflow-y: auto; padding-right: 2em; } 

當我嘗試Michael_B建議的一些事情（特別是添加填充緩沖區）時，我發現了這一點，非常感謝！

編輯：我看到他也發布了一個小提琴做了同樣的事情 - 再次，非常感謝你的幫助