css 如何防止弹性列下级扩大上级高度？[duplicate]

j7dteeu8 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(115)

- 此问题在此处已有答案**：

Why is percentage height not working on my div? [duplicate]（2个答案）
昨天关门了。
下面的代码：

<div class="container">
    <div class="left">
        <!-- Children expands parent past container height -->
    </div>
    <div class="right">

    </div>
<div>

<style>
.container {
    width: 100%;
    height: 100%;
    display: row;
    flex-direction: column;
}

.container .left {
    width: 300px;
    height: 100%;
    overflow-y: auto;
}

.container .right {
    flex: 1 1 auto;
    height: 100%;
}
</style>

但是当我向.left div添加元素时，高度会扩展而不是滚动。
如何让.left div滚动其内容，而不是扩展其高度？

css

来源：https://stackoverflow.com/questions/75136763/how-to-prevent-flex-column-child-from-expanding-parent-height

1条答案

按热度按时间

nmpmafwu1#

我相信你所需要做的就是在px中为. left设置一个高度或者你喜欢的任何高度。如果内容超过了这个高度，这将导致div滚动。我做了如下的修改

.container .left {
width: 300px;
height: 300px;
overflow-y: auto;
background-color: blue;

}
或者你也可以为你的. container设置一个高度，这也会迫使你的. left在它填满容器中的空间时溢出。

.container {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
}

希望这能有所帮助!

赞(0）回复(0）举报 2023-01-18

我来回答

css 如何防止弹性列下级扩大上级高度？[duplicate]

1条答案

相关问题

热门标签

最新问答