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

查看 29|回复 2
作者: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.
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部