schematu flexbox: Div wysokość uzależniona do rodzeństwa div

Question

Mam dwie div owinięty wewnątrz owijki, oba mają dynamiczne wysokościach

#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>

Lewa div zawsze powinny być głównym czynnikiem dla opakowań wysokość. Czy istnieje sposób na to, aby to zrobić samodzielnie przez css?

Szerokość kolumn jest znana, używam układu siatki Bootstrap.

Wiem, podając #wrapper div display: flex div dzieci są równe wysokości. Czy jest jakaś właściwość, aby powiedzieć przeglądarce, że wysokość jest zawsze równa wrapper, niezależnie od tego, czy jej zawartość jest mniejsza niż #right? Przechodzę przez the Complete Guide to Flexbox, ale taka właściwość nie istnieje.

---

Oto obraz, aby moje pytanie jaśniejsze:

Answer 1

Można owinąć zawartość w prawej kolumnie na inny div i ustawić ją na absolutny ustawione, więc wysokość, która kolumna nie zostanie określona przez zawartość. Dzięki sztuczkom pozycjonowania i overflow: auto uruchamia pasek przewijania w razie potrzeby.

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>