flex布局中，子元素height设置为100%失效

最新推荐文章于 2024-11-04 17:17:27 发布

乐悠刘LL

最新推荐文章于 2024-11-04 17:17:27 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 flex html

本文链接：https://blog.csdn.net/liusixsixsix/article/details/108117952

css 专栏收录该内容

5 篇文章

订阅专栏

探讨了在Flex布局中，子元素无法通过设置100%高度来完全填充父元素的问题。通过调整CSS属性，确保子元素能够响应式地占据整个容器的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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