Safari中的Flexbox子项比预期的

Question

看到这支笔： https://codepen.io/armandsdz/pen/xqGaoe

我有一个简单的基础网格，我将display:flex设置为＆＃34; row＆＃34;元素，以使所有列的高度相同。 这一切都适用于Chrome，Firefox。 但是在Safari，Edge，Yandex浏览器（任何版本）上，这些列都是一个像素左右太宽，导致它们不适合一行。因此，它包装成两行。 See image

如果只有一行，设置flex-wrap: nowrap将是一个选项，但通常情况并非如此。 最重要的是，它并没有解决问题的核心。

我在这个flexbox世界中缺少什么或者它是一个错误？

谢谢！

增加：不仅在列宽为33.33333％时，而且在25％时也是如此。那么额外的像素来自哪里？

Answer 1

:before和:after伪元素是clearfix hack的一部分，其中包含浮点数并防止边距崩溃。 （有关此问题，请参见this SO question。）Flexbox本质上不考虑浮点数，但是不支持flexbox的旧版浏览器将退回到使用浮点数，因此需要使用clearfix。根据@DannieVinther和@Armands的评论，有两种可能的解决方案：

1. 如果要为不支持flexbox的旧版浏览器维护clearfix功能，可以添加一个规则，以在width: 100%;和:before伪指令上设置:after -元素。这将使伪元素的宽度为100％，高度为0，因此它们不会干扰实际内容的行的宽度。

   .row:before, .row:after {
       width: 100%;
   }
   

2. 如果不需要/不需要支持较旧的浏览器，则可以通过在content: none;和:before上添加设置:after的规则来覆盖clearfix hack。伪元素。

   .row:before, .row:after {
       content: none;
   }