Почему высота блока получается больше высоты дочерних блоков?

Question

[sriver]

Собственно лучше посмотреть, что бы понять:

https://ru.whamisa.com/catalog/osnovnoy_ukhod/toner_na_osnove_tsvetochnykh_fermentov_nasyshchennyy_event_item/

У блока .card-item-wrapper внизу остается пустое пространство, хотя блоки внутри него заканчиваются раньше.
Причем размер этого пустого пространства зависит от количества контента в дочерних блоках (можно перейти к другим товарам, что бы убедиться в этом)
на мобильном все нормально, т.к. все блоки показываются в столбик.

Answer 1

[Вадим Кот]

Уберите для .card-item-wrapper .item-block display: inline-block;
В случае с css columns inline-block бессмыслен, да и еще и добавляет внизу отступ (есть такой нюанс при работе css columns с inline-block в некоторых версиях webkit браузеров).
А чтобы перенос происходил так, как у вас был с inline-block, добавьте breake-inside:

.card-item-wrapper .item-block {
    padding: 0 15px;
    margin-bottom: 1rem;
    max-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}