Как заставить элемент Flexbox заполнить оставшееся вертикальное пространство? [дубликат] ⇐ CSS

[Anonymous]

[*]Я хочу, чтобы #item-3 заполнил оставшееся вертикальное пространство.
[*]Я не могу изменить #root, #item-1 или #item-2. . Изменить можно только #item-3.
[*]Из соображений производительности я хотел бы решить эту проблему, используя только CSS, не полагаясь на JavaScript.

Я пытаюсь заставить элемент заполнить оставшееся вертикальное пространство в макете Flexbox, не затрагивая другие элементы. Ниже приведены мои текущие HTML и CSS:

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

Document

body {
padding: 0px;
margin: 0px;
height: 100vh;
background-color: gray;
}

#root {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
align-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100% !important;
background-color: green;
}

#item-1 {
flex: 1 1 auto;
align-self: flex-start;
width: 40%;
min-width: 100px;
max-height: 100% !important;
}

#item-2 {
flex: 1 1 auto;
align-self: flex-start;
width: 60%;
min-width: 100px;
max-height: 100% !important;
}

#item-3 {
flex: 1 1 auto;
align-self: flex-start;
width: 100%;
min-width: 100px;
max-height: 100% !important;
background-color: red;
}





Dynamic content with uncertain height 1
Dynamic content with uncertain height 2
Dynamic content with uncertain height 3

Подробнее здесь: https://stackoverflow.com/questions/793 ... ical-space