Flex 布局“大”变天，Chrome 73 之坑得你防！

Chrome 73 引发的 Flex 布局“危机”

许多开发者在更新到 Chrome 73 后，发现自己网站上的 flex 布局出现了问题。最常见的现象是：父元素的高度被子元素撑开了，导致滚动元素无法滚动。

困惑：规范？新标准？

面对这一现象，开发者们一脸懵逼：what? why? 纳尼？

仔细研读了规范后，开发者们恍然大悟：Chrome 的此举改动正是为了让浏览器的 flex 布局行为更贴近规范！

Flex 布局中的 flex-grow、flex-shrink 和 flex-basis

要理解 Chrome 73 的改动，我们需要先了解 flex 布局中的三个重要属性：flex-grow、flex-shrink 和 flex-basis。

flex-grow 决定了元素在主轴上有多大程度的伸展能力。flex-shrink 决定了元素在主轴上有多大程度的收缩能力。flex-basis 决定了元素在主轴上的初始大小。

在 Chrome 73 之前，浏览器在计算 flex 布局时，会先根据 flex-basis 为每个子元素分配一个初始大小，然后根据 flex-grow 和 flex-shrink 属性，来分配剩余的空间。

Chrome 73 的改动

Chrome 73 对 flex 布局的计算规则进行了调整。现在，浏览器在计算 flex 布局时，会先根据 flex-grow 和 flex-shrink 属性，来分配剩余的空间，然后再根据 flex-basis 为每个子元素分配一个初始大小。

这一改动导致了如下变化：

• 在新版 Chrome 中，如果一个子元素的 flex-grow 属性为 1，那么它将尽可能地伸展，直到占据整个可用空间。
• 在新版 Chrome 中，如果一个子元素的 flex-shrink 属性为 1，那么它将尽可能地收缩，直到其大小为 0。

对开发者意味着什么

Chrome 73 的改动对开发者意味着：

• 如果你希望子元素能够尽可能地伸展或收缩，你需要为其设置 flex-grow 或 flex-shrink 属性。
• 如果你不希望子元素撑开父元素的高度，你需要为其设置 flex-basis 属性。

应对之道

为了应对 Chrome 73 的改动，开发者可以采取以下措施：

• 为子元素设置 flex-basis 属性，以控制其初始大小。
• 为父元素设置 overflow 属性，以控制其滚动行为。
• 使用 flexbox 布局时，避免使用 100vh 的高度单位，以防止子元素撑开视口。

总结

Chrome 73 对 flex 布局的改动，是为了让浏览器的 flex 布局行为更贴近规范。开发者需要了解这些改动，并相应地调整自己的代码，以避免出现布局问题。