flex容器内antd Carousel设置height:100%无效如何修复

antd Carousel基于slick封装，渲染时会在组件标签和轮播项之间自动生成.ant-carousel、.slick-slider、.slick-list、.slick-track等多层嵌套DOM。你仅给自定义外层节点和Carousel标签本身设置了height: 100%，但这些自动生成的内部节点默认没有高度继承规则，高度传递链路断裂，因此无法撑满容器剩余高度。

不需要修改已有的外层容器样式，做两处调整即可：

• 给Slides组件的根flex子项增加minHeight: 0，移除冗余的height: 100%，避免flex布局默认最小内容高度规则导致的高度计算异常
• 在轮播对应的CSS文件中补全Carousel内部所有嵌套节点的高度继承规则，打通高度传递链路，注意加父级作用域避免全局样式污染

修改后的Slides组件代码 #

import React from 'react'
import './Carousel.css'
import {Carousel} from 'antd'
import carouselLink from '../../asserts/carousel_1.png'
const Slides = () => {
  return (
    <div style={{flex: '1', minHeight: 0}}>
      <Carousel style={{ height: '100%' }}>
        <div style={{
          backgroundImage: `url(${carouselLink})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover',
          height: '100%'
        }}>      
          <h1>Galaxy S22 Ultra</h1>
          <p>结账选购其他活动商品可享100美元三星即时抵扣金<sup>ƾ</sup>，此外最高可享1000美元增强以旧换新补贴，参与符合条件的以旧换新活动后低至199.99美元即可入手，原价1199.99美元<sup>θ</sup>。</p>
        </div>
      </Carousel>
    </div>
  )
}

export default Slides

需要补充到Carousel.css的样式 #

/* 仅作用于当前页面的轮播，避免全局样式污染 */
.samsung__main .ant-carousel,
.samsung__main .ant-carousel .slick-slider,
.samsung__main .ant-carousel .slick-list,
.samsung__main .ant-carousel .slick-track,
.samsung__main .ant-carousel .slick-slide > div {
  height: 100%;
}

调整完成后，高度会从外层100vh的flex容器逐层传递到轮播项，轮播就可以正常撑满Header下方的全部剩余空间。

内容的提问来源于stack exchange，提问作者RozumyratDev