哪位前端老哥能解释一下，为什么容器设置 overflow-y 也能防止元素*宽度*溢出容器？

[yodhcn]

设计的布局很简单：左侧 nav ，右侧 main ； mian 容器中放一个 swiper 轮播组件，宽度默认充满容器。但是

[ codesandbox ] https://codesandbox.io/p/devbox/gzlqqh

• 为什么 swiper 在未设置宽度情况下，宽度无限大并超出容器？
• 为什么容器设置 overflow-y 也能防止元素宽度溢出容器？

初学 CSS 的时候就听说设置 overflow 能治一些疑难杂症，问题是解决了，但想不通是怎么解决的，哪位有经验的前端老哥能解释一下？

[yongjing]

设置 overflow 能治一些疑难杂症 这个应该是说 BFC
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context

[old9]

第一个问题，宽度并不是无限大，是被这个 swiper 组件计算并指定的。看起来很大应该是这个组件的计算 bug 。
第二个问题，因为标准就这么定义的

CSS spec: https://www.w3.org/TR/css-overflow-3/
The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.

MDN 解读: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
If overflow-y is hidden, scroll, or auto, and the overflow-x property is visible (default), the value will be implicitly computed as auto.

[shintendo]

简单来说，overflow 的默认值是两个方向都 visible ，但同时又禁止单个方向 visible ，所以如果你改了一个方向，就会让另一个方向变成 auto.

不要试图用理性去挑战不可名状的 CSS Spec ，你会陷入疯狂的。

[kongkongye]

@shintendo 的确，我一直觉得 css 很复杂，有些样式怎么都调不好

[Yaavi]

看了代码，俺来解释下：设置了 overflow-y 这时候 overflow-x 被隐式改为了 auto ，而 overflow 值不为 visible 或 clip 的块级元素会触发重新创建新的 BFC ，理解成 重新创建了一个 独立的小盒子 就行，这个时候这个 独立的小盒子 的宽度会由父元素的宽度决定，所以出现了描述中的效果。

[yodhcn]

@shintendo #3 但是设置 overflow-x-hidden 、overflow-x-auto 、overflow-y-hidden 、overflow-y-auto 任意一个都能解决这个问题。我也怀疑是 swiperjs 组件计算宽度的 bug ，但我看不懂源码，不清除组件宽度计算的具体逻辑

[kile]

切记，css 是背的不是去理解的

[chouvel]

css 是一门你永远学不会的语言

[19cm]

css 本来就不完善有很多历史遗留问题