`whitespace：no-wrap`阻止了Safari中的flex-wrap

Question

目标是每行有三个项目，但是如果项目的内容太多而无法允许这样做。

请参阅http://codepen.io/anon/pen/QGpeXY

<div class="FlexContainer">
  <div class="FlexItem">Item 1</div>
  <div class="FlexItem">Item 2</div>
  <div class="FlexItem">Item 3</div>
</div>

<div class="FlexContainer">
  <div class="FlexItem">Item 1</div>
  <div class="FlexItem">Item 2</div>
  <div class="FlexItem">Item 3 Item 3 Item 3 Item 3 Item 3</div>
</div>

* {
    box-sizing: border-box;
}

.FlexContainer {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    width: 50%;
}

.FlexItem {
    flex: 1 0 33%;
    padding: 5px;
    border: 1px solid black;
    white-space: nowrap;
    background: red;
}

在Chrome和Firefox（都在OSX上），＆＃39;项目3＆＃39; flex项目按预期包装：

但是在Safari（在OSX上），文本溢出容器：

我找不到像在其他浏览器中那样将Flex项目包装在Safari中的方法。有什么建议吗？

可能与this bug有关，但这看起来与min-width的互动有关，我没有在此处进行设置。我已经提出了一个新的错误here，但在此期间可以采用一种解决方法。