Flex-grow不受边界框的影响。错误与否？还有什么方法可以克服？

Question

我正在尝试创建一个CSS类，它应该占用flex容器的剩余空间，而不管flex-items的数量。这意味着固定百分比width或flex-basis不是一种选择。

根据this answer，应用.flex-item { flex-grow: 1; flex-basis: 0; }应该可以做到这一点，但是as you can see here，当某些项目有填充或边框时，它不起作用，即使在设置框后 - 调整到边框。

这是一个错误还是想要的行为？是否可以为任意数量的弹性项指定相等的宽度，无论填充和边界是什么？

Answer 1

这不是错误。这是理想的行为。

当你有一堆flex项目并应用flex-basis: 0和flex-grow: 1时，浏览器会采取以下步骤：

• 渲染flex-items具有的文本和其他内容
• 应用填充，边框和边距（考虑到框大小）
• 从最小的（flex-basis: 0）开始，继续为项目添加宽度，直到容器已满（flex-grow: 1）。

最后一步是你的问题所在。浏览器不会强制元素首先变为0px宽，然后使它们均匀增长。浏览器只是从最小的开始（直到它增长到第二小的宽度。此时它们都会增长。依此类推），增加宽度直到所有空间分布。这也是box-sizing: border-box无效的原因。

您可以通过向每个应用了边框部分的flex项添加容器来解决此问题。见This Fiddle。我只是简单地将单词包装到另一个div中，并将所有CSS应用到它中（当然，除了特定于flex项目的部分）