Safari-具有溢出的弹性项目无法正确呈现？

Question

在Safari 12上（我不完全确定它是否仅限于12个，但在Safari 10上工作正常），我遇到了一个问题，即我的flex-item的水平滚动条会渲染其内容，除非我强制回流。

我有一个非常令人难以置信的基本示例：

https://codepen.io/anon/pen/NOOXwe

HTML

<div class="flexbox">
  <div class="overflow">asdasdasddasdsadasdsadasdsadasdsadasdsadasdsadasdsadasdsadasdsadasdsadasdsasa</div>
</div>

CSS

.flexbox {
  display: flex;
  width: 200px;
}

.overflow {
  overflow-x: auto;
}

我希望滚动条显示在我的文本下-这是我的误解吗？