Chrome与Firefox浏览器的Overflow行为差异技术问询

问题场景 #

开发带内部滚动列表的侧边栏时，出现跨浏览器行为不一致：

• Chrome中，侧边栏内的所有列表内容整体跟随父容器滚动
• Firefox中，每个<ul>子元素各自独立滚动，即使设置了#scrollable-sidebar > * { overflow-y: visible; }也无法改变这一行为
  已知合并所有<ul>为单个元素可解决问题，但需要明确浏览器差异的底层原因。

核心差异原因分析 #

1. 滚动容器上下文的判定逻辑不同 #

Chrome将父容器#scrollable-sidebar作为唯一的滚动上下文，子元素设置overflow-y: visible时，会直接将内容融入父容器的滚动流，不会触发子元素自身的滚动机制。

而Firefox对滚动上下文的判定更偏向子元素自身的容器边界：当<ul>作为块级子元素存在明确的高度约束（比如通过flex布局分配的空间、或内部内容撑开的高度超出父容器分配的区域），即使设置overflow-y: visible，Firefox仍会认为子元素需要维护自身的容器边界，从而触发独立滚动——它认为visible属性无法突破子元素已被限定的高度范围。

2. Flex布局下的高度计算策略差异 #

你的侧边栏采用flex布局：

• Chrome中，flex子元素（<ul>）的高度会被拉伸以适配父容器的滚动区域，子元素的内容直接纳入父容器的滚动上下文，不会单独触发滚动。
• Firefox中，每个<ul>作为独立的flex子元素，会被计算为拥有自身高度边界的容器。当子元素内容超出这个边界时，Firefox会优先为子元素创建独立滚动上下文，而非将内容流入父容器的滚动流，这就导致了每个列表独立滚动的现象。

3. CSS规范的模糊地带 #

CSS规范对于overflow: visible在嵌套滚动容器中的行为并没有做出绝对明确的定义，不同浏览器厂商基于自身的布局引擎实现了不同的策略：

• Chrome更倾向于“父容器滚动上下文优先”，让子元素的visible内容自然融入父容器的滚动流
• Firefox则更注重“子元素容器边界的维护”，当子元素有明确高度约束时，优先保证容器边界，触发独立滚动

验证方法 #

如果给<ul>设置height: auto，同时移除flex布局中对其的高度限制，Firefox的滚动行为会和Chrome一致——此时子元素没有明确的高度边界，overflow-y: visible会让内容自然流入父容器的滚动区域。

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