Flexbox: Div Höhe abhängig Geschwister div

Question

Ich habe zwei divs innerhalb einer Hülle umhüllt, haben beide dynamische Höhen:

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

Die linke div sollte immer der führende Faktor für die Wrapper sein Höhe. Gibt es eine Möglichkeit, dies allein durch css rein zu machen?

Die Breite der Spalten ist bekannt, ich benutze Bootstrap Grid-Layout.

Ich weiß, indem ich die #wrapper div display: flex die Kinder Divs sind gleich der Höhe. Gibt es eine Eigenschaft, um den Browser zu sagen #left Höhe ist immer die wrapper Höhe, egal ob der Inhalt mehr von weniger als #right ist? Ich habe the Complete Guide to Flexbox durchlaufen, aber eine solche Eigenschaft scheint nicht zu existieren.

---

hier ein Bild meiner Frage klarer zu machen:

Answer 1

Sie den Inhalt in der rechten Spalte in einer anderen div wickeln kann, und es absolut positionierte gesetzt, so dass die Höhe, dass Spalte wird nicht durch den Inhalt bestimmt. Mit den Positionstricks und overflow: auto wird die Bildlaufleiste nach Bedarf ausgelöst.

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>