html - 絶対配置コンテナー内のフレックス列の高さが等しい

Question

コードペンはこちら: https://codepen.io/anon/pen/MvqWwg

私は絶対に位置付けdiv.containerました。div.wrapperその中。および のフレックス列としての 2 つの div div.wrapper。これらの列には背景があります。

これらの背景を、コンテナーの目に見える高さだけでなく、最も長い列の最後に移動する (つまり、それらを同じ高さにする) にはどうすればよいですか? position: absoluteから削除できませんdiv.container。

これは HTML コードです。

<div class="container">
    <div class="wrapper">
        <div class="div1">
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
        </div>
        <div class="div2">
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
        </div>
    </div>
</div>

これはCSSです：

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.div1 {
    background-color: yellow;
}
.div2 {
    flex: 1;
    background-color: green;
}