css - フレックス ボックスが Chrome で正常に動作しない

Question

フレックスボックスCSSを使用していくつかのものを実装しようとしています。Chrome と Firefoxで互換性が欲しいだけです。FF ではこれを行うことができますが、 Chromeでは機能しません。私が望むのは、垂直ボックスを中央に再帰的に挿入することです。ここで見ることができます。

div.contenaireBlc {background:#FFF; border:1px solid #ddd;
                      width:250px; height:250px;margin:0 30px 0 0;}


.contenaireHori {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  -webkit-flex-direction: column;
  -webkit-flex-wrap: nowrap;
  background:#777; 
  height:100%;
  width:100%;
}

.innerTop{
  -webkit-flex: 1 1 50%;
  flex: 1 1 50%;
  background: green;
  width: 100%;
}


.traversHori{
  flex: 0 0 20px;
  -webkit-flex: 0 0 20px;
  background: blue; 
  width: 100%;

}

.innerBottom{
  -webkit-flex: 1 1 50%;
  flex: 1 1 50%;
  background: red;
  width: 100%;
}

chromeでは、2 番目の赤と緑のボックスの高さ = 0pxがあり、左側のスペース (それぞれ 50%) を取ります。