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

设计的布局很简单：左侧 nav ，右侧 main ； mian 容器中放一个 [swiper]( https://swiperjs.com/) 轮播组件，宽度默认充满容器。但是

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

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

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

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

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

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

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

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

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

@shintendo 的确，我一直觉得 css 很复杂，有些样式怎么都调不好 https://i.imgur.com/NIvxivj.png

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

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

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

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