Child which is flex container not respecting container height on Firefox

Question

I have a flex container (.child2) which is a child of a fixed-height container (.container). Though it's flex-direction is column, flex-wrap is wrap and it's children should and could create a second column to fit inside the container, they don't and overflow the container on Firefox. They do respect container's height on Chrome.

How could I force Firefox to behave as Chrome does without declaring flex container's height?

HTML

<div class="container">
  <div class="child1"></div>
  <ul class="child2">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 350px;
}

.child1 {
  height: 28px;
}

.child2 {
  display: flex;
  flex-flow: column wrap;
}

ul > li {
  height: 50px;
  width: 100px;
}

Pen: http://codepen.io/anon/pen/evoLbb