antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG

believeyourself

原文地址:https://www.qianduan.shop/blo...

antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG

问题复现

开发环境: win10 + React17 + umi3 + antd v4.16

任意层次的父级节点的布局设置为flex布局,carousel组件就会出现无限宽度的问题。

测试代码如下:

<div style={{ display: "flex" }}>
  <Carousel autoplay>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </Carousel>
</div>

结果如下图:

如何解决

1.直接设置carousel组件的样式宽度为固定宽度

  <Carousel autoplay style={{width:"500px"}}>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
  </Carousel>

2.如果不存在嵌套flex布局且父级节点为flex布局的话,可以通过覆盖设置样式解决,代码如下:


.ant-carousel {
  flex: 1;
  max-width: 100%;
}

3.如果存在嵌套flex布局或跨了2个层级及以上的父级节点为flex布局的话,可以指定父节点宽度为某个固定宽度解决,代码如下:

//嵌套flex布局
<div style={{ display: "flex"" }}>
  <div style={{ display: "flex", width:"500px" }}>
    <Carousel autoplay>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
    </Carousel>
  </div>
</div>

//跨了2个层级及以上的父级节点为flex布局
<div style={{ display: "flex"" }}>
  <div style={{ width:"500px" }}> //指定父节点宽度为500px
    <Carousel autoplay>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
    </Carousel>
  </div>
</div>
阅读 219
8 声望
0 粉丝
0 条评论
你知道吗?

8 声望
0 粉丝
文章目录
宣传栏