Предотвратить принудительное увеличение высоты контейнера внутри родительского flexbox ⇐ CSS

[Anonymous]

Мне нужно решить сложную задачу с сеткой изображений: первая строка состоит из 4 блоков по 25% в поперечнике, вторая будет состоять из 3 блоков по 2 блока по 25% и 1 изображение, занимающее 50% оставшегося. пространство.
У меня макет работает нормально, мне просто нужно зафиксировать высоту блоков 50% так же, как и блоков 25%, и ограничить изображение с помощью подгонки объекта.
Однако, что бы я ни делал, изображение большего размера внутри блока 50% увеличивается до естественной высоты изображения в зависимости от его соотношения сторон.
код можно найти здесь
https://codepen.io/alexmorris/pen/jOQyM ... d8fe4b3bee

Код: Выделить всё

*,
html {
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
margin: 0;
padding: 0;
}

img {
width: 100%;
height: auto;
}

section {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
}

div {
flex: 0 0 25%;
}

div:nth-child(7) {
flex: 0 0 50%;
align-self: start;
}

div:nth-child(7) img {
object-fit: cover;
height: 100%;
object-position: center;
}

Код: Выделить всё

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

[img]https://assets.codepen.io/66278/kam3.jpg[/img]
Some words go in here

Перепробовали все варианты гибкого сжатия, но безрезультатно

Подробнее здесь: https://stackoverflow.com/questions/765 ... box-parent