我有一个 flex 列容器,其中包含两个元素,其中包含 .one 和 .two 类:
.container {
display: flex;
flex-direction: column;
}
.one {
height: 50vh;
background: blue;
}
.two {
height: 50px;
background: red;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
这个问题是当.one的内容大于50vh时它与.two类重叠,.two类是加载指示符,.one是50vh高度的容器,所以当它加载时, .two class 保持在同一位置,但我想在内容大于 50vh 时增加 .one class 的高度,并防止它在 .two class 上重叠,有帮助吗?
最佳答案
使用最小高度而不是高度然后。一个容器将占用它的必要空间
.one {
min-height: 50vh;
background: blue;
}
关于html - 设置 flex 元素的高度或根据内容扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53846607/