Flexbox: Div height dependent to sibling div

Question

I got two div's 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 wrappers height. Is there a way to do this pure by css alone?

The width of the columns is known, I'm using Bootstrap grid layout.

I know by giving the #wrapper div display: flex the children div's are equal of height. Is there some property to tell the browser #left height is always the wrapper's height , no matter if the content is more of less than #right? I've been going through the Complete Guide to Flexbox, but such property seems not to exist.

---

Here a picture to make my question clearer:

Answer 1

You can wrap the content in the right column into another div, and set it to absolute positioned, so the height of that column will not be determined by the content. With the position tricks and overflow: auto it will trigger the scrollbar 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>