哪位前端老哥能解释一下，为什么容器设置 overflow-y 也能防止元素*宽度*溢出容器？
yodhcn yodhcn 2024-09-19 15:10:27 +08:00 2524 次点击这是一个创建于 387 天前的主题，其中的信息可能已经有所发展或是发生改变。
设计的布局很简单：左侧 nav ，右侧 main ； mian 容器中放一个 swiper 轮播组件，宽度默认充满容器。但是
[ codesandbox ] https://codesandbox.io/p/devbox/gzlqqh
- 为什么 swiper 在未设置宽度情况下，宽度无限大并超出容器？
- 为什么容器设置
overflow-y也能防止元素宽度溢出容器？
初学 CSS 的时候就听说设置 overflow 能治一些疑难杂症，问题是解决了，但想不通是怎么解决的，哪位有经验的前端老哥能解释一下？
9 条回复 2024-09-20 11:30:53 +08:00
 | 1 yongjing 2024-09-19 15:19:46 +08:00 设置 overflow 能治一些疑难杂症 这个应该是说 BFC https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context |
 | 2 old9 2024-09-19 15:52:08 +08:00  1 第一个问题，宽度并不是无限大，是被这个 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. |
 | 3 shintendo 2024-09-19 16:17:38 +08:00 2 简单来说，overflow 的默认值是两个方向都 visible ，但同时又禁止单个方向 visible ，所以如果你改了一个方向，就会让另一个方向变成 auto. 不要试图用理性去挑战不可名状的 CSS Spec ，你会陷入疯狂的。 |
 | 4 kongkongye 2024-09-19 16:43:21 +08:00 @shintendo 的确，我一直觉得 css 很复杂，有些样式怎么都调不好  |
 | 5 Yaavi 2024-09-19 16:53:01 +08:00 1 看了代码，俺来解释下：设置了 overflow-y 这时候 overflow-x 被隐式改为了 auto ，而 overflow 值不为 visible 或 clip 的块级元素会触发重新创建新的 BFC ，理解成 重新创建了一个 独立的小盒子 就行，这个时候这个 独立的小盒子 的宽度会由父元素的宽度决定，所以出现了描述中的效果。 |
 | 6 yodhcn OP @shintendo #3 但是设置 overflow-x-hidden 、overflow-x-auto 、overflow-y-hidden 、overflow-y-auto 任意一个都能解决这个问题。我也怀疑是 swiperjs 组件计算宽度的 bug ，但我看不懂源码，不清除组件宽度计算的具体逻辑 |
 | 7 kile 2024-09-19 17:04:13 +08:00 1 切记，css 是背的不是去理解的 |
 | 8 chouvel 2024-09-20 09:43:15 +08:00 css 是一门你永远学不会的语言 |
 | 9 19cm 2024-09-20 11:30:53 +08:00 css 本来就不完善有很多历史遗留问题 |
Select Language