咨询：设置min-width为360px时滚动条异常的非像素减法解决办法

这个问题确实挺恼人的——当垂直滚动条出现时，它会占用一部分视口宽度，导致你的.App元素因为min-width:360px的限制，被迫超出视口范围，进而触发水平滚动条。不用手动减去滚动条像素的话，有几个优雅的解决方案：

方案1：使用scrollbar-gutter: stable（推荐） #

这是CSS专门针对滚动条布局偏移推出的解决方案，它会提前为垂直滚动条预留出稳定的空间。不管滚动条是否出现，内容的可用宽度都保持一致，自然就不会触发水平滚动条了。

修改你的CSS如下：

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100%; scrollbar-gutter: stable; }
.App { min-width: 360px; }

你也可以把scrollbar-gutter: stable直接加到.App容器上，效果是一致的。这个属性目前已被大多数现代浏览器支持，是最理想的解决方式。

方案2：用min-width: min(360px, 100vw) #

这个方法利用CSS的min()函数，让元素的最小宽度取360px和视口宽度的较小值。当视口宽度因滚动条出现而被压缩（实际等于360px减去滚动条宽度）时，元素会自动适配视口宽度，避免超出范围。

修改后的CSS：

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100%; }
.App { min-width: min(360px, 100vw); }

这个方法兼容性比scrollbar-gutter更好，适合需要兼容旧版浏览器的场景。

方案3：强制body始终显示垂直滚动条 #

这是个取巧但有效的办法——让页面始终显示垂直滚动条，这样滚动条占用的空间一直存在，就不会因为滚动条的出现/消失导致布局偏移了：

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100%; overflow-y: scroll; }
.App { min-width: 360px; }

缺点是即使页面内容不够长，也会显示空的垂直滚动条，视觉上略有瑕疵，但能彻底解决滚动条导致的水平滚动问题。

内容的提问来源于stack exchange，提问作者ZiiMakc