Почему наличие дополнительной обертки с поведением в процентах высоты изменения дисплея? ⇐ Html

[Anonymous]

Я хотел бы понять, почему зеленый див с голубой границей ведет себя так в этих случаях. div class = "Snippet">

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

.wrapper {
display: flex;
border: solid 2px black;
}

.red {
width: 25px;
height: 25px;
background-color: red;
}

.green {
height: 100%;
background-color: green;
border: solid 2px cyan;
}

.blue {
width: 50px;
height: 50px;
background-color: blue;
}< /code>

Результат: Green Div имеет нулевую высоту вместо высоты синего.
с дополнительной оберткой. Оба с помощью Display Flex: < /h2>

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

.wrapper {
display: flex;
border: solid 2px black;
}

.red {
width: 25px;
height: 25px;
background-color: red;
}

.green {
height: 100%;
background-color: green;
border: solid 2px cyan;
}

.blue {
width: 50px;
height: 50px;
background-color: blue;
}< /code>

Результат: зеленый див имеет высоту синего, как и ожидалось.
с дополнительной оберткой. Только бабушка с гибкой дисплеем: < /h2>


.wrapper {
display: flex;
border: solid 2px black;
}

.red {
width: 25px;
height: 25px;
background-color: red;
}

.green {
height: 100%;
background-color: green;
border: solid 2px cyan;
}

.blue {
width: 50px;
height: 50px;
background-color: blue;
}< /code>





< /code>
< /div>
< /div>
< /p>
Результат: Green Div имеет синий + Red + (Cyan Border * 2 ) высота, как и ожидалось.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ntage-beha