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

Question

[Alexander3928]

Почему изображении вылазит за пределы фиксированого значения родителя? И как это фиксануть

https://codepen.io/Alexxxsander/pen/QWmMwpd

Answer 1

[cssfish]

Потому что минимальное значение для детей в flex&grid берется по контенту.
Т.е. что бы не вылазило, переопределяем минимальное значение, в данном случае - высоту.
.parent > * { min-height: 0; }

Далее аналогично для внутреников правой...
.parent .item-2 div { min-height: 0; }

Answer 2

[ArtJH]

Чтобы запретить выходить за пределы родителя, нужно задать ему свойство overflow: hidden

.parent {
    overflow: hidden;
}

Comments

[Alexander3928]

Мне это будет только в минус. Мне нужно чтобы все блоки были целыми

Answer 3

[Noder SS]

Если хотите обрезать, то родителю добавьте overflow:hidden;

Answer 4

[drtvader]

Ну или например внутри body overflow: auto сделать. Задача непонятна.

Answer 5

[Максим Морев]

Есть от вопроса ощущение проблемы XY
Но если уж решать обозначенную проблему, то два пути у вас:

1. Убрать `height` у родительского блока
   
2. Сделать внутренним элементам относительное позиционирование, а картинки внутри прибить к ним абсолютами