Css Flex grow不尊重边框框。虫子还是虫子？有什么办法可以克服吗？

我试图创建一个CSS类，该类应该占用flex容器的剩余空间，而不管flex项目的数量如何。这意味着固定百分比宽度或弹性基础不是一个选项

根据，应用.flex项{flex grow:1；flex basis:0；}应该可以做到这一点，但是，当某些项具有填充或边框时，即使将框大小设置为border box，它也不起作用

---

这是bug还是期望的行为？是否可以为任意数量的flex项目指定相同的宽度，而不考虑填充和边框？

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

当您有一组flex子项，并对其应用flex basis:0和flex grow:1时，浏览器将执行以下步骤：

呈现flex子级具有的文本和其他内容 应用填充、边框和边距，同时考虑框大小 从最小的flex子级开始，因为flex basis:0一直在为项目添加宽度，直到容器已满flex grow:1。 最后一步就是你的问题所在。浏览器不会强制元素首先为0像素宽，并且所有元素都均匀增长。浏览器只是从最小的flex子项开始，给它更多的宽度，直到它增长到第二小的宽度为止。在这一点上，这两个灵活的孩子都将平均增长。以此类推，增加宽度直到所有空间都被分配。这也是为什么框大小：边框框似乎不起作用

---

您可以通过向每个flex项添加一个容器来解决这个问题，其中应用了边框框部分。看见内容被包装到另一个div中，样式也被应用到其中，当然flex特定属性除外。

这不是一个bug。这是理想的行为

当您有一组flex子项，并对其应用flex basis:0和flex grow:1时，浏览器将执行以下步骤：

呈现flex子级具有的文本和其他内容 应用填充、边框和边距，同时考虑框大小 从最小的flex子级开始，因为flex basis:0一直在为项目添加宽度，直到容器已满flex grow:1。 最后一步就是你的问题所在。浏览器不会强制元素首先为0像素宽，并且所有元素都均匀增长。浏览器只是从最小的flex子项开始，给它更多的宽度，直到它增长到第二小的宽度为止。在这一点上，这两个灵活的孩子都将平均增长。以此类推，增加宽度直到所有空间都被分配。这也是为什么框大小：边框框似乎不起作用

您可以通过向每个flex项添加一个容器来解决这个问题，其中应用了边框框部分。看见内容已经被包装到另一个div中，当然，除了flex特有的属性之外，样式也被应用到了该div中