Flex布局中，子元素不能height填充满

<div class="main-container">
    <div class="left">
        LEFT
    </div>
    <div class="right">
        <div class="child scrollable">
            RIGHT
            <br/><br/><br/>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
        </div>
    </div>
</div>

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

.main-container {
    height:100%;
    display:flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-align-content: stretch;
    align-content: stretch;
}

.left {
    background-color:lightgreen;
    width:100px;
}

.right {
    background-color: red;
    -webkit-flex: 1;
    flex:1;
    position:relative;
}

.child {
    background-color:steelblue;
    position:absolute;
    width:100%;
    height:100%;    
}

.scrollable {
     overflow-y:auto;
}