Почему контент вылазит за высоту контейнера?

Question

[Overlord934]

Почему высота не подстроилась под размер содержимого?
HTML

<section class="gallery">
            <div class="container">
                <div class="gallery__inner">
                    <div class="gallery__column gallery__column-1">
                        <div class="gallery__item gallery__item-1">
                            <img src="images/gallery-img-1.png" alt="">
                        </div>
                        <div class="gallery__item gallery__item-6">
                            <img src="images/gallery-img-6.png" alt="">
                        </div>
                        <div class="gallery__item gallery__item-10">
                            <img src="images/gallery-img-10.png" alt="">
                        </div>
                    </div>
                    <div class="gallery__column gallery__column-2">
                        <div class="gallery__row gallery__row-1">
                            <div class="gallery__item gallery__item-2">
                                <img src="images/gallery-img-2.png" alt="">
                            </div>
                            <div class="gallery__item gallery__item-3">
                                <img src="images/gallery-img-3.png" alt="">
                            </div>
                            <div class="gallery__item gallery__item-4">
                                <img src="images/gallery-img-4.png" alt="">
                            </div>
                        </div>
                        <div class="gallery__row gallery__row-2">
                            <div class="gallery__item gallery__item-7">
                                <img src="images/gallery-img-7.png" alt="">
                            </div>
                            <div class="gallery__item gallery__item-8">
                                <img src="images/gallery-img-8.png" alt="">
                            </div>
                        </div>
                        <div class="gallery__row gallery__row-3">
                            <div class="gallery__item gallery__item-11">
                                <img src="images/gallery-img-11.png" alt="">
                            </div>
                            <div class="gallery__item gallery__item-12">
                                <img src="images/gallery-img-12.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="gallery__column gallery__column-3">
                        <div class="gallery__item gallery__item-5">
                            <img src="images/gallery-img-5.png" alt="">
                        </div>
                        <div class="gallery__item gallery__item-9">
                            <img src="images/gallery-img-9.png" alt="">
                        </div>
                        <div class="gallery__item gallery__item-13">
                            <img src="images/gallery-img-13.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>

CSS

.gallery {
    
}

.gallery__inner {

    display: flex;

}

.gallery__column-1 {
    display: flex;
    flex-direction: column;
    gap: 1%;
}

.gallery__column-2,
.gallery__column-3 {
    display: flex;
    flex-direction: column;
}

.gallery__column-2 {
    margin: 0 0.8%;
}

.gallery__column-3 {
    gap: 2%;
}

.gallery__item img {
    max-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.gallery__row {
    display: grid;
}

.gallery__row-1 {
    grid-template-columns: 1.2fr 2fr 2fr;
    grid-template-rows: 1fr;
    justify-items: center;
    gap: 2%;
}

.gallery__row-2 {
    grid-template-columns: 1.5fr 2fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    gap: 5%;
    margin: 1.1% 0;
}

.gallery__row-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: end;
    gap: 2%;
    margin-top: -2%;
}

.gallery__item-7 {
    margin-left: 5%;
    margin-bottom: -6%;
}

Comments

[Ankhena]

Потому что не поместилось.

Научитесь делать песочницы на codepen.io с видимой проблемой и минимальным кодом, достаточным для её иллюстрации.

Перед тем как задавать что-то в процентах, имеет смысл выяснить от чего эти проценты считаются.

[Overlord934]

Ankhena, и как это можно поправить? Разве высота не должна подстраиваться по содержимому?

[Ankhena]

Overlord934, см комментарий выше.

У вас проблема не в верстке, а в геометрии с арифметикой. Сумму заданных вами размеров вообще невозможно вычислить.
gap в процентах приводит к проблемам и по горизонтали, а уж по вертикали почти всегда. За исключением фиксированной высоты.
Отступы в процентах считаются от ширины родителя. Даже вертикальные.
В итоге у вас там написана дичь.

Т.е. сначала нужно разобраться с тем, что вам нужно, в формулировках на родном языке. Потом с геометрией. И только потом писать свойства. И/или js к ним в помощь.

Можно начать читать вот отсюда https://learn.javascript.ru/height-percent