横向滚动元素被截断：flex布局下子元素实际宽度与计算值不符问题

问题原因 #

这个问题的核心是CSS中百分比宽度的计算规则：子元素的百分比宽度参考的是父元素width属性的计算值，而非父元素被min-width/max-width撑开后的实际渲染宽度，具体逻辑如下：

• 344px宽度下，最外层容器.width-100vw的宽度为344px
• 其子元素.layout设置了width: 100% !important，因此该元素的width属性计算值为 344px * 100% = 344px
• 虽然.layout同时设置了min-width: 1000px，让它实际渲染的边界被撑到了1000px，但这个属性不会修改width本身的计算值
• 左右两侧子元素的宽度calc(7/16 * 100%)、calc(9/16 * 100%)里的100%，参考的是父元素.layout的width计算值344px，而非实际渲染的1000px，最终算出来的左侧宽度只有约150.5px，和你预期的437.5px差距很大，就是你看到的“实际宽度远小于预期”的现象。

修复方案 #

去掉.layout上的width: 100% !important规则即可，改为默认的width: auto后，.layout的宽度计算值会取min-width的1000px，子元素的百分比宽度就会基于1000px正常计算，和预期一致。

内容的提问来源于stack exchange，提问作者Rahul R Badenkal