Cannot height antd carousel inside flexbox div

I build samsung home page. In basic header and slides I add one div:

<div className="samsung">
      <div className="samsung__main">
        <Header />
        <Slides />
      </div>
      
</div>

and I add some style:

.samsung__main{
  display: flex;
  height: 100vh;
  flex-direction: column;
}

In Slides components I use antd Carousel. But it didnt get height: 100%:

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', height: '100%'}}>
      <Carousel style={{ height: '100%' }}>
        <div style={{
          backgroundImage: `url(${carouselLink})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover',
          height: '100%'
        }}>      
          <h1>Galaxy S22 Ultra</h1>
          <p>Get $100 instant Samsung Credit toward other offers during checkout.<sup>ƾ</sup> Plus, get up to $1000 enhanced trade-in credit. From $199.99 <s>$1199.99</s> with eligible trade-in.<sup>θ</sup></p>
        
        </div>
        
      </Carousel>

    </div>
    
  )
}

export default Slides

How to fix it? I cannot change css style