Safari和Android上的Flexbox高度问题

Question

我有一个我无法解决的flexbox问题。在Chrome中，它看起来像这样： 在Safari（以及在Android手机上）那样：

我试图找到一个解决方案，绿色div总是在高度上缩放。换句话说，它应该在每个浏览器中的Chrome上显示。

这是小提琴：https://jsfiddle.net/9v0Lnnaa/

HTML

<div class="flexContainer">
  <div class="flexItem">
    <div class="flexItemContent">
      bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
  <div class="flexItem">
    <div class="flexItemContent">
      bla
      <br /> bla
      <br /> bla
      <br /> la
      <br /> bla
      <br /> bla
      <br /> bla
    </div>
  </div>
</div>

CSS

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.flexItem {
  width: 300px;
  border: 1px solid black;
  margin: 5px;
}

.flexItemContent {
  background-color: green;
  height: 100%;
}