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

经过验证，需要在父元素（flex-container）设置height=100%;而子元素不可以设置height=100%否则将失效

于是，如上图去除子元素的100%属性。

<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>

对应的Css

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;
}

 

转载于:https://www.cnblogs.com/yida915/p/6474109.html