Flexbox:Div高度取决于兄弟div

Question

我把两个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网格布局.

我知道通过给予#wrapperdiv display: flex,孩子们的div等于身高.是否有一些属性告诉浏览器#left高度始终wrapper是高度,无论内容是否小于#right？我一直在阅读Flexbox的完整指南,但这样的属性似乎不存在.

---

这张照片让我的问题更加清晰:

Answer 1

您可以将右列中的内容包装到另一个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>