Flex-grow 不尊重边界框。错误与否？以及有什么办法可以克服？

Question

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

根据这个答案，应用.flex-item { flex-grow: 1; flex-basis: 0; }应该可以解决问题，但正如您在此处看到的，当某些项目具有填充或边框时，即使将 box-sizing 设置为 border-box，它也不起作用。

这是错误还是期望的行为？是否可以为任意数量的 flex 项目指定相等的宽度，而不管填充和边框如何？

Answer 1

这不是一个错误。这是所需的行为。

当你有一大堆的柔性儿童，并申请flex-basis: 0并flex-grow: 1给他们，正在采取通过浏览器进行以下步骤：

• 呈现 flex-children 拥有的文本和其他内容
• 应用填充、边框和边距（考虑框大小）
• 从最小的 flex-child 开始（因为flex-basis: 0）不断增加项目的宽度，直到容器已满（flex-grow: 1）。

最后一步是您的问题所在。浏览器不会强制元素先是 0 像素宽，然后全部均匀增长。浏览器只是从最小的 flex-child 开始，给它更多的宽度，直到它变得和第二小的一样宽。在这一点上，这两个 flex-children 都会均匀地生长。依此类推，增加宽度直到所有空间都被分配。这也是为什么box-sizing: border-box似乎不起作用。

您可以通过向每个应用了边框框部分的 flex-item 添加一个容器来解决此问题。看到这个小提琴。内容已被包装到另一个 div 中，并且样式也已应用于它（当然，特定于 flex 的属性除外）。