我把两个div包裹在一个包装内,两者都有动态的高度:
#wrapper {
display: flex;
}
<div id="wrapper">
<div id="left">dynamic content, height could be more or less than #right</div>
<div id="right">dynamic content, height could be more or less than #left</div>
</div>
左div应该始终是包装器高度的主要因素。有没有办法通过css单独做到这一点?
列的宽度是已知的,我正在使用Bootstrap网格布局。
我知道通过给#wrapper
div display: flex
,孩子div等于身高。是否有一些属性告诉浏览器#left
高度始终是wrapper
的高度,无论内容是否小于#right
?我一直在经历the Complete Guide to Flexbox,但这样的财产似乎不存在。
这张照片让我的问题更加清晰:
答案 0 :(得分:6)
您可以将右列中的内容包装到另一个div中,并将其设置为绝对定位,因此该列的高度将不会由内容确定。使用位置技巧和overflow: auto
,它将根据需要触发滚动条。
<强> jsFiddle 强>
.wrapper {
display: flex;
width: 200px;
}
.left,
.right {
outline: 1px solid red;
width: 50%;
}
.right {
position: relative;
}
.scrollable {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
<div class="wrapper">
<div class="left">left column with shorter content</div>
<div class="right">
<div class="scrollable">dynamic content, height could be more or less than #left</div>
</div>
</div>
<hr>
<div class="wrapper">
<div class="left">left column with longer content alksjl alsdjike alidek alsdikk las dfiklwkjl iasdifielkjas d alsdjfi laskdfial asdielaf,.asdf</div>
<div class="right">
<div class="scrollable">dynamic content, height could be more or less than #left</div>
</div>
</div>