safari显示弹性全高内容

Question

我正在使用flex容器，它在IE、FF和Chrome上工作得很好，但在Safari上就不行了，我只是想设置一个容器，里面有一个div，里面有文本，文本必须垂直居中到容器中，如果高度较大，则可以滚动，我的例子中容器需要是绝对位置。

这是我的代码。

<div class="container c1">
        <div class="content">/!\ START /!\ Sed ultrices nec felis ut rhoncus. Maecenas sit amet quam non orci semper laoreet vel ut ante. Donec sed pellentesque magna. Ut faucibus odio massa, id consectetur urna molestie vel. Suspendisse finibus imperdiet euismod. Proin ut augue nec justo facilisis ullamcorper. Cras accumsan dapibus tellus, non aliquet elit venenatis sed. Quisque ultrices, nibh sit amet fermentum suscipit, tortor nulla dapibus diam, sed vestibulum nisl ipsum id quam. Suspendisse vestibulum neque fringilla nunc blandit, quis tempor sapien elementum. Etiam metus mauris, lobortis vitae lorem vitae, luctus pellentesque nisl. Fusce sed orci orci. Fusce venenatis eget nisi et gravida. Nam non magna eu velit imperdiet convallis. Nullam malesuada lorem vel vestibulum hendrerit. In orci mi, imperdiet quis enim sit amet, lobortis sollicitudin lorem. Curabitur tellus ex, feugiat eu quam eget, congue mattis purus.</div>
    </div>
    <div class="container c2">
        <div class="content">text need to be centered vertically</div>
    </div>


.container {
            color: #000;
            font-size: 20px;
            overflow-y: auto;
            text-align: left;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            width: 300px;
            height: 500px;
            position: absolute;
            overflow-y: auto;
            background: #aaa;
        }
        .c1 {
            left: 0;
        }
        .c2 {
            left: 320px;
        }
        .content {
            box-sizing: border-box;
            word-wrap: break-word;
            padding: 3px 6px 4px;
            align-items: center;
            display: flex;
            height: 3000px;
        }

我的codepen在这里。https:/codepen.iolokomasspengOaWRwm。

这是我想要的（IE，FF，chrome）。

这是我在我的iPhone中的内容(滚动是最小的，看不到所有的文本)

谢谢你的帮助