这是一个创建于 63 天前的主题，其中的信息可能已经有所发展或是发生改变。
设计的布局很简单：左侧 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 63 天前
设置 overflow 能治一些疑难杂症 这个应该是说 BFC
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context |
 |
2
old9 63 天前  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 63 天前 1
简单来说，overflow 的默认值是两个方向都 visible ，但同时又禁止单个方向 visible ，所以如果你改了一个方向，就会让另一个方向变成 auto.
不要试图用理性去挑战不可名状的 CSS Spec ，你会陷入疯狂的。 |
 |
4
kongkongye 63 天前
@shintendo 的确，我一直觉得 css 很复杂，有些样式怎么都调不好
 |
 |
5
Yaavi 63 天前 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 63 天前 1
切记，css 是背的不是去理解的
|
 |
8
chouvel 62 天前
css 是一门你永远学不会的语言
|
 |
9
tianzi123 62 天前
css 本来就不完善有很多历史遗留问题
|
Select Language