使列填写使用基金会Flex网格

Question

我想编写一个页面布局大致模样this CodePen，我有main容器需要填满整个浏览器屏幕（100% height）可用高度，和两个子div元素12列。

第一列有一个固定的高度，我需要第二个填充容器中剩余的垂直空间。但是，当我将第二列的height设置为100%时，取而代之的是容器的剩余高度，它仅获得父容器高度的100%，并以与父容器高度相同的高度结束。有没有办法让第二列填充剩下的垂直空间？

编辑：第一列的高度实际上并没有固定，它可能会有所不同。

Answer 1

如果父容器是height: 100%，并且存在与height: 100px一个子元素...

当你给别的孩子height: 100%，它就会溢出容器，因为它的兄弟姐妹已经消耗掉100像素。

换句话说：

100% + 100px > 100% 

取而代之的是：

.box-two { 
    background: red; 
    height: 100%; 
} 

试试这个：

.box-two { 
    background: red; 
    height: calc(100% - 100px); 
}