共计 745 个字符，预计需要花费 2 分钟才能阅读完成。
overflow 属性的便捷语法
CSS 的 overflow 属性定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。是 overflow- x 和 overflow- y 的简写属性。
一般，我们会赋予它单个值，比如 visible，hidden，scroll。这里介绍一下该属性的便捷语法，赋予两个值，分别控制 overflow- x 和 overflow-y。
比如：overflow: hidden auto;相当于overflow-y:hidden; overflow-x: auto;
以上就是 overflow 属性的便捷语法。
便捷语法需要注意的问题
overflow 的便捷语法是个比较新的属性。 可能习惯了 CSS 便捷写法的我们会认为，这种写法理所当然的早就应该支持。然而事实不是这样——
overflow 便捷语法对应的 overflow- x 和 overflow- y 的顺序，还尚未达成一致。根据 MDN 的说法，为了匹配使用新逻辑属性 overflow-block 和 overflow-inline 时的顺序，Firefox 63 就尝试将之前的顺序颠倒了一遍。然而到现在，FireFox 67 依然没有做出这样的更新，Chrome 74 也没有。展示如下：
FireFox 67
Chrome 74
至于移动端的浏览器，笔者并未过多测试，估计目前采取的做法是 取第一个值。
总结
关于笔者为何调查这么蛋疼的问题，当然是因为工作中遇到了问题。Chrome 中白纸黑字，明确告诉笔者的先 X 后 Y 的顺序，到了 iOS 的移动端，不论 safari 还是 webview，都没有正确的展现——overflow: hidden auto;本意是 x 轴隐藏，y 轴滚动，到了 iOS 移动端，y 轴就是不按照规则滚动；待笔者改为overflow: auto hidden;，y 轴才正常滚动。于是有此文。