Jacob van Lingen Jacob van Lingen - 5 months ago 14
CSS Question

Flexbox: Div height dependent to sibling div

I got two div's wrapped inside a wrapper, both have dynamic heights:

<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 are 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:

Explanation

Answer

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>

Comments