Я не могу установить высоту реакции-скользящего слайдера

Question

Я создаю карусель с реагирующим пятном: есть 3 уровня (эти большие синие элементы на фотографиях) здания, и я помещаю их в каждую двухрядную карусель, которая представляет офисы. Они будут менять свои цвета при нажатии с белого на красный и наоборот.

Структура (я использовал classNames вместо "div" в качестве тэгов, но все они - div):

<level1>
    <label>that white label div on the left of a level</label>
    <cards>the blue part of the level div...
        <slider-container>
            <Slider>
                <Card1 class="red" or "white">I created this react class</Card1>
                <Card2></Card2>
                <Card3></Card3>
                ...
            </Slider>
        </slider-container>
    </cards>  
</level1>
<level2>...same</level2>
<level3>...same</level3>

Было трудно уместить ширину ползунка в элементе контейнера, теперь это сделано, но почему-то я не могу разместить ползунки со 100% высотой в их элементах контейнера (осталось место) Я попытался добавить фиксированный размер в пикселях, что работает, но мне нужно сделать его отзывчивым, поэтому, если высота контейнера div изменяется, мне нужно, чтобы ползунки тоже изменили свою высоту.

Я добавляю следующие рисунки, я проверял в Dev-Tools, что каждый div в иерархии имеет стиль "height:100%", но все еще ничего.

1-слайдер-контейнер заполняет уровень (div "cards")

отсюда я не могу получить доступ к элементам, они получены из компонента Slider реагирующего-скользящего слайдера:

2-скользящий слайдер заполняет контейнер-слайдер

3-Slick-список заполняет Slick-слайдер

4-Slick-трек заполняет Slick-список

5-я не знаю, что делает этот скользящий слайд, но не вижу его высоты

6-и вот моя собственная созданная карта

наконец я покажу вам свой код тоже. Это класс Card

export default class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cardClass:"",
            textClass:"",
        };   
    }
    componentDidMount(){
        if (this.props.firm.status) {
            this.setState({cardClass:"red-card"});
            this.setState({textClass:"white-text"});
        } else {
            this.setState({cardClass:"white-card"}); 
            this.setState({textClass:"blue-text"});
        }
    }
    render() {
        return (
            <div className={this.state.cardClass}>
                <p>{this.props.firm.firmName}</p>
                <p>{this.props.firm.officeNumber}</p>
            </div>
        );
    }
}

Класс SlickSlider (Slider импортирован из response-slick-slider):

export default class SlickSlider extends Component {
    render() {
        const settings = {
            arrows: false,
            slidesToShow: 7, 
            speed: 500,
            rows: 2,
            slidesPerRow: 1,
            slidesToScroll: 2
        };
        return (
            <div className="slider-container">
                <Slider {...settings}>
                    <Card firm={{firmName:"ceg1", officeNumber:"134", status:true}}/>
                    <Card firm={{firmName:"ceg2", officeNumber:"111", status:false}}/>
                    <Card firm={{firmName:"ceg3", officeNumber:"222", status:true}}/>
                    <Card firm={{firmName:"ceg4", officeNumber:"111", status:false}}/>
                </Slider>
            </div>
        );
    }
}

Который ставится в классе Level:

export default class Level extends Component {
    constructor(props) {
        super(props);   
    }
    render() { 
        return (
            <div className="level">
                <div className="label">
                    <p className="level-label">{this.props.level}. emelet</p>
                </div>
                <div className="cards">
                    <SlickSlider></SlickSlider>
                </div>
            </div>
        );

}}