在前端开发中，CSS Grid 是一个常用的布局方式。但是，当我们在 iOS 设备上使用 overflow-scroll 属性时，会出现一些奇怪的问题，其中最常见的就是 CSS Grid 的列宽变成了 24 像素。
问题背景
假设我们要实现一个两列布局，其中一列宽度为 200 像素，另一列自适应。我们可以使用以下代码实现：
-- -------------------- ---- ------- ---- ---------------- ---- ---------------- --------- ---- ----------------------- ------ ------- -------- - -------- ----- ---------------------- ----- ----- - --------
这段代码在大多数 PC 浏览器中都能正常工作，但是在 iPhone 上，如果我们添加了 overflow-scroll 属性，就会出现问题。
-- -------------------- ---- ------- ---- --------------- ----------------------- --------- ---- ---------------- --------- ---- ----------------------- ------ ------- -------- - -------- ----- ---------------------- ----- ----- - --------
问题表现
在 iOS 设备上，添加 overflow-scroll 后，我们发现第二列的宽度变成了 24 像素，而第一列保持在 200 像素。这种问题的解决方法并不是很简单，因为它需要对 CSS Grid 和 overflow-scroll 属性的工作原理进行了解。
问题分析
在 iOS 设备上，当我们给一个元素添加 overflow-scroll 属性时，浏览器会创建一个新的容器，并使用 webkit-overflow-scrolling 属性实现滚动效果。这个新的容器并不是我们原本的 grid 容器，所以我们定义的列宽并没有被正确地应用到滚动容器中。
在实现滚动效果时，WebKit 使用另一种方式计算元素的宽度。按照这种方式，元素的宽度被计算为 100% 减去滚动条的宽度，并在这个基础上进行最小宽度的调整。这样就导致了第二列的宽度被计算为 100% - 2px（即滚动条的宽度）- 174px（200 像素的第一列宽度），最终结果为 24 像素。
问题解决
我们可以通过调整 CSS 属性来解决这个问题。具体来说，我们需要把 grid-template-columns 属性从原本的 grid 容器上移动到滚动容器上，并将其设置为与 grid 容器相同的值。
-- -------------------- ---- -------
---- --------------- ----------------------- ------- -------- -----------
---- ---------------
---- ---------------- ---------
---- -----------------------
------
------
-------
-------- -
-------- -----
-
------- -
-------- -----
---------------------- ----- -----
-
--------这样我们就可以确保 grid 容器和滚动容器的列宽相同。为了实现这个效果，我们将 display: contents 应用到原始的 grid 容器上，这样可以使它的子元素消失掉，并将 display: grid 应用到滚动容器，以保证我们能够在这里使用 grid 布局。
总结
在 iOS 设备上，使用 overflow-scroll 属性会导致 CSS Grid 的列宽发生奇怪的变化，特别是当列宽小于 100 像素时。虽然这是 WebKit 的一个有点怪异的特性，但也并不是无解的问题。通过将 grid 容器的属性移动到滚动容器中，我们可以解决这个问题，并确保网页在所有浏览器中都能正确地显示。
如果你在使用 CSS Grid 的同时也要使用 overflow-scroll 属性，那么请务必注意这个问题并相应地进行调整。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64785546968c7c53b0494320