[JavaScript知识库]antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG

原文地址：https://www.qianduan.shop/blogs/detail/12

# 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>
```

结果如下图：

<img alt="antd的carousel走马灯组件在flex布局下会出现无限宽度的BUG]" src="/static/images/6.png" width="100%">

## 如何解决
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>

```