Показать/скрыть лишние товары

Сделал контейнер с фиксированной высотой и overflow: hidden что бы при загрузке страницы показывались только те товары которые помещаются по высоте, а при нажатии на кнопку все остальные. Но при изменении ширины экрана, высота карточек тоже меняется и нижние частично выходят за границу. Можно ли сделать на css, что бы нижние карточки не выходили за нее? На ум приходит только зафиксировать высоту карточек, но это тоже не очень удобно.

    <div class="goods ">
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
                <div class="good__item flex">
                    <div class="good__item_thumb">
                        <img src="/wp-content/themes/mellowlife/img/goods_thumb.jpg" alt="">
                    </div>
                    <div class="goods__title">
                        <a href="#">Product longest name ever testing here please stay calm</a>
                    </div>
                    <div class="goods__item_buy flex">
                        <span class="goods__cost">75</span>
                        <span class="add__to_cart">add to cart</span>
                    </div>
                </div>
            </div>

css:

.shop .goods {
    overflow: hidden;
    height: 2340px;
}

css при нажатии на кнопку:

.goods.active {
    height: auto;
}