Html 缩小以适应 flexbox 或 flex-basis 中的内容：内容解决方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33557043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shrink to fit content in flexbox, or flex-basis: content workaround?
提问by nrkn
I have a webapp with which I'm using flexbox for layout.
我有一个 webapp，我使用 flexbox 进行布局。
I'm trying to both fill the screen (it's an app, not a document), and as far as possible to not specify any fixed widths or heights as the content could be all sorts of things (Full fluid layout! The dream!)
我正在尝试填充屏幕（它是一个应用程序，而不是文档），并且尽可能不指定任何固定的宽度或高度，因为内容可能是各种各样的东西（完全流畅的布局！梦想！）
So I need fluid height, full width headers and footers, and then a main panel in the middle filling the remaining vertical space, divided into columns, each of which scrolls when too high, and where the width of each non-primary column should shrink to fit its content, and a primary column which uses up the remaining space.
所以我需要流畅的高度，全宽的页眉和页脚，然后在中间的主面板填充剩余的垂直空间，分为列，每列在太高时滚动，每个非主列的宽度应该缩小以适应其内容，以及一个用完剩余空间的主列。
I am so close, but have had to resort to explicitly sizing the non-main columns - I believe that flex-basis: content;is supposed to do this but isn't supported by browsers yet.
我非常接近，但不得不求助于明确调整非主列的大小 - 我相信flex-basis: content;应该这样做，但浏览器尚不支持。
Here's a minimal demoshowing fixed size columns:
这是一个显示固定大小列的最小演示：
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>Which looks like this - I want columns Oneand Twoto shrink/grow to fit rather than being fixed:
它看起来像这样-我想列一个和两个收缩/成长，以适应，而不是固定的：
My question is, is there a CSS-only workaround for flex-basis: content, or an alternative way to realise this goal?
我的问题是，是否有仅 CSS 的解决方法flex-basis: content，或实现此目标的替代方法？
I can possibly live with fixing the column sizes as above, or using javascript, but I HAVE A DREAM DAMN IT.
我可以像上面那样修复列大小，或者使用 javascript，但我有一个该死的梦想。
采纳答案by nrkn
It turns out that it was shrinking and growing correctly, providing the desired behaviour all along; except that in all current browsers flexbox wasn't accounting for the vertical scrollbar! Which is why the content appears to be getting cut off.
事实证明，它正在正确地收缩和增长，一直提供所需的行为；除了在所有当前浏览器中 flexbox 不考虑垂直滚动条！这就是为什么内容似乎被切断的原因。
You can see here, which is the original code I was using before I added the fixed widths, that it looks like the column isn't growing to accomodate the text:
您可以在这里看到，这是我在添加固定宽度之前使用的原始代码，看起来该列没有增长以容纳文本：
http://jsfiddle.net/2w157dyL/1/
http://jsfiddle.net/2w157dyL/1/
However if you make the content in that column wider, you'll see that it always cuts it off by the same amount, which is the width of the scrollbar.
但是，如果您使该列中的内容更宽，您会看到它总是将其剪掉相同的数量，即滚动条的宽度。
So the fix is very, very simple - add enough right padding to account for the scrollbar:
所以修复非常非常简单 - 添加足够的右填充来解释滚动条：
http://jsfiddle.net/2w157dyL/2/
http://jsfiddle.net/2w157dyL/2/
main > section {
overflow-y: auto;
padding-right: 2em;
}It was when I was trying some things suggested by Michael_B (specifically adding a padding buffer) that I discovered this, thanks so much!
当我尝试 Michael_B 建议的一些东西（特别是添加填充缓冲区）时，我发现了这一点，非常感谢！
Edit: I see that he also posted a fiddle which does the same thing - again, thanks so much for all your help
编辑：我看到他还发布了一个做同样事情的小提琴 - 再次，非常感谢你的帮助
回答by Michael Benjamin
I want columns One and Two to shrink/grow to fit rather than being fixed.
我希望第一列和第二列缩小/增长以适应而不是固定。
Have you tried: flex-basis: auto
你有没有尝试过： flex-basis: auto
or this:
或这个：
flex: 1 1 auto, which is short for:
flex: 1 1 auto，它的缩写：
flex-grow: 1(grow proportionally)flex-shrink: 1(shrink proportionally)flex-basis: auto(initial size based on content size)
flex-grow: 1（按比例增长）flex-shrink: 1（按比例缩小）flex-basis: auto（初始大小基于内容大小）
or this:
或这个：
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;
}
Related:
有关的：
