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

后果如下图：

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