Как правильно реализовать BorderLayout в HTML / CSS с использованием flexbox?

Question

Пожалуйста, найдите здесь фрагмент HTML и соответствующий CSS, который создает BorderLayout:

https://jsbin.com/zokutalafe/edit?html,css,output

-

Желтая область в этом примере BorderLayout должна иметь высоту 100%К сожалению, он не имеет: - (

Вопрос теперь: возможно ли изменить высоту этого желтого контейнера до 100%, просто изменив CSS, а НЕ (!) HTML, без использования нового [Edit:Я имею в виду «дополнительные»] CSS-селекторы (означает: что-то вроде «.borderlayout-center> div {height: 100%}» не допускается) ???

Это для очень особого варианта использования - этопочему у меня есть вышеупомянутые странные ограничения.

Заранее большое спасибо.

Answer 1

Я не уверен, что вы имеете в виду с новыми селекторами CSS

Но что-то вроде

.borderlayout-center div{
  height: 100%;
}

в этом нет ничего нового, и он работает ...

Answer 2

Вы можете использовать, как показано ниже:

.borderlayout-center div {
    height: 100%;
}