CSS flexbox布局：高度100％的孩子？ [英] CSS flexbox layout: child with height 100%?

问题描述

我试图使用一个圣杯样式的布局与flexbox - 固定标题上面填充页面的列。我将我的代码基于此来源。

I am trying to use a 'Holy Grail'-style layout with flexbox - fixed header above columns that fill the page. I am basing my code on this source.

我的问题是，在主单元格中的 height：100％的子元素不会拾取布局的高度。下面的演示展示了我的意思，我想让红色元素占据整个高度（在Webkit中测试）：

My problem is that a child element with height:100% inside of the main cell does not pick up the height of the layout. The following demo shows what I mean, I want the red element to take up the full height (tested in Webkit):

http://jsbin.com/dafac/2/

如何解决此问题

How can I fix this?

推荐答案

这篇关于CSS flexbox布局：高度100％的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！