相关疑难解决方法(0)

我在使用flexbox列时遇到麻烦,因为flex'd元素的子元素不会以height百分比形式响应.我只在Chrome中检查过此内容,据我所知,这只是Chrome的问题.这是我的例子:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

这是CodePen.

我想要它,所以红色.flex-child填充蓝色.flex.为什么不起作用height:100%？