原文地址：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>