Как предотвратить «погружение» элементов под экран при изменении размера окон в CSS? ⇐ CSS

[Anonymous]

Я пытаюсь создать блок во второй половине страницы, но проблема в том, что всякий раз, когда я изменяю размер области просмотра (неважно, высоту или ширину), он просто уходит под экран, игнорируя нижнее поле
HTML:

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

[img]bg3.png[/img]

CSS:

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

body{
overflow: hidden;
background-image: url('bg.png');
background-size: contain;
}

.container {
display: flex;
flex-direction: row;
}

.section1,
.section2 {
flex-grow: 1;
flex-basis: 50%;
}

.section2 {
background-color:blanchedalmond;
z-index: 1;
position: relative;
margin-top: 3%;
margin-bottom: 3%;
margin-right: 3%;
width: 50vw;
height: 90vh;
max-width: 100%;
max-height: 90vh;
}

Вот визуализация того, что я имею в виду: GIF-файл
Я пробовал играть с разной шириной, высотой и максимальными значениями, но безрезультатно: (
Заранее спасибо

Подробнее здесь: https://stackoverflow.com/questions/782 ... ng-windows