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

Posted 2023-03-05

【中文标题】Flex-grow 不尊重边界框。错误与否？以及有啥办法克服吗？

【英文标题】：Flex-grow doesn't respect border-box. Bug or not? And any way to overcome?Flex-grow 不尊重边界框。错误与否？以及有什么办法克服吗？

【发布时间】：2017-01-27 15:26:32

【问题描述】：

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

根据this answer，应用.flex-item flex-grow: 1; flex-basis: 0; 应该可以解决问题，但是as you can see here，当某些项目有填充或边框时它不起作用，即使在将 box-sizing 设置为 border-box 。

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

【参考方案1】：

这不是错误。这是期望的行为。

当你有一堆 flex-children，并为它们应用 flex-basis: 0 和 flex-grow: 1 时，浏览器正在执行以下步骤：

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

最后一步是您的问题所在。浏览器不会强制元素首先是 0 像素宽并且全部均匀增长。浏览器简单地从最小的 flex-child 开始，给它更大的宽度，直到它变得像 second 最小的一样宽。到那时，这两个 flex-children 都将均匀增长。依此类推，增加宽度直到所有空间分布。这也是box-sizing: border-box 似乎不起作用的原因。

您可以通过为每个弹性项目添加一个容器来解决此问题，该容器应用了边框部分。见this Fiddle。内容已被包装到另一个 div 中，并且样式也已应用于它（当然，特定于 flex 的属性除外）。