如何正确使用flexbox在HTML / CSS中实现BorderLayout？

Question

请在此处找到一个HTML代码段以及用于构建BorderLayout的相应CSS：

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

-

该BorderLayout示例中的黄色区域应具有100％的高度，不幸的是，它应没有：-（

现在的问题是：是否可以仅通过修改CSS而不是HTML来将黄色容器的高度更改为100％，而无需使用新的HTML [编辑：我的意思是“附加”] CSS选择器（意味着：不允许使用“ .borderlayout-center> div {height：100％}”之类的东西？？

这是一个非常特殊的用例-这就是为什么我有上述奇怪的约束条件的原因。

非常感谢。

Answer 1

您可以如下使用：

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

Answer 2

对于新的CSS选择器，我不确定您的意思

但是类似

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

这不是什么新东西，它可以工作...