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

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

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

问题复现

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

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

测试代码如下：

  
    

      
1
    
    

      
2
    
  

结果如下图：

如何解决

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

  
    

      
1
    
    

      
2
    
  

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

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

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

//嵌套flex布局

  

    
      

        
1
      
      

        
2
      
    
  


//跨了2个层级及以上的父级节点为flex布局

  
 //指定父节点宽度为500px
    
      

        
1
      
      

        
2