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

Question

请在此处找到构建 BorderLayout 的 HTML 片段和相应的 CSS：

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

-

该 BorderLayout 示例中的黄色区域的高度应为 100%，不幸的是它没有:-(

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

这是一个非常特殊的用例——这就是为什么我有上面提到的奇怪约束。

提前非常感谢。

标签： htmlcsslayoutflexboxborder-layout

Answer 1

你可以像下面这样使用：

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