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>

Левый ДИВ всегда должен быть ведущим фактором для оберток высота. Есть ли способ сделать это чистым только css?

Ширина столбцов известна, я использую макет сетки Bootstrap.

Я знаю, что даю #wrapper div display: flex Дети-дивы равны по высоте. Есть ли какое-либо свойство, чтобы рассказать браузеру #left height всегда является высотой wrapper, неважно, если содержание более чем #right? Я прошел через the Complete Guide to 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>