Flexbox: Div height dependent on sibling div

Question

I have two divs wrapped inside a wrapper, both have dynamic heights:

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

The left div should always be the leading factor for the height of the wrappers. Is there any way to make this clean only css?

The width of the columns is known; I am using the Bootstrap grid layout.

I know that by giving #wrapper div display: flex div children are equal in height. Is there any property to tell the browser #left height always the height of the wrapper , regardless of whether the content contains less than #right ? I went through the full Flexbox tutorial , but such a property does not seem to exist.

---

Here is an image to make my question clearer:

Answer 1

You can move the contents in the right column to another div and set it to an absolute position, so the height of this column will not be determined by the content. With position tricks and overflow: auto it will trigger the scroll bar as needed.

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>