CSS横向滚动父容器内垂直滚动子元素如何保持宽度不被限制同步滚动

• 只要元素设置了非visible值的overflow属性，浏览器就会把它当成一个独立的滚动容器，默认宽度适配当前可见的屏幕宽度，不会像普通块级元素那样，靠内部white-space: nowrap的不换牌子元素自动撑开到内容的总宽度。
• 你给line4加的max-width: 100%进一步把它的宽度锁死在屏幕可见宽度里，完全没法和其他行保持一致的宽度。
• 搭配的overflow-x: hidden会直接把line4内部超出自身宽度的横向小方块裁掉，看起来就像line4只有屏幕那么宽，根本没和其他行对齐。

• 首先删掉line4上两个多余的限制配置：max-width: 100%、overflow-x: hidden，这俩是锁死宽度、裁切内容的元凶。
• 给line4补上width: max-content规则，让它的宽度计算逻辑和其他行完全一样——不管内部子元素横向排了多宽，元素宽度就跟着撑到内容的总宽度，自然就能和其他行一起，被父容器的横向滚动条带着同步移动。
• 原来的垂直滚动属性全部保留：overflow-y: auto、固定height:15px都不用改，只要内部内容高度超过15px，垂直滚动就会正常触发，和横向布局完全不冲突。

修改后的line4样式参考：

<div style="overflow-y: auto; overflow-x: visible; height:15px; white-space: nowrap; width: max-content;" id="line4">

• 做横向滚动布局的时候，千万别给需要跟着横向滚动的子元素随便加max-width:100%，这里的100%是对着屏幕可见宽度计算的，不是横向滚动的内容总宽度，一加就会把元素锁死在屏幕宽度里，没法跟随父容器横向滚动。
• 给元素加overflow做滚动效果的时候，一定要先确认元素宽度是匹配内部内容总宽度的，否则overflow会直接裁切超出范围的内容，造成布局错位。
• width: max-content是所有现代浏览器原生支持的属性，不需要额外做兼容处理。

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