带有滚动子区域的Flexbox响应页面在Safari中不起作用

Question

我想创建一个包含主区域和可滚动边区域的页面。当页面太小时，我希望侧面区域包裹在下面，整个页面要滚动。如果可能的话，我想在纯CSS中做到这一点。我想出了以下内容，它适用于Chrome但不适用于Safari。 （在Safari中，整个页面总是滚动。）

我如何解决这个问题，更重要的是，我是否误解了flexbox？

html, body, main {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-flow: row wrap;
  overflow: scroll;
}
content {
  min-width: 600px;
  flex: 9999 1 auto;
  background-color: #ffa;
}
aside {
  flex: 1 1 auto;
  overflow: scroll;
  background-color: #aff;
}

<main>
  <content>
    main
  </content>
  <aside>
    side
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
  </aside>
</main>

查看完整页面以查看响应行为，或参阅this fiddle。