缩小以适应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建议的一些事情（特别是添加填充缓冲区）时，我发现了这一点，非常感谢！

编辑：我看到他也发布了一个小提琴做了同样的事情 - 再次，非常感谢你的帮助