Safari Flexbox切断内容

Question

我有3行，分别是页眉，内容和页脚。它可以在Chrome中按预期方式呈现，但在Safari中则无法显示。我在做什么错了？

Screenshot

.wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1;
}

<div className="wrapper">
  <div className="header">I am a header</div>
  <div className="content">I am some content</div>
  <div className="footer">
    <ul>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
      <li>Hi</li>
    </ul>
  </div>
</div>