Two divs side-by-side, equal height governed by one

Question

Given the following markup:

<div class="wrapper">
  <div id="one">
    Some content
  </div>
  <div id="two">
    Some content
  </div>
</div>

What's the simplest way to make both divs the same height, which is the calculated height of #two (specifically, with the height auto but adhering to min-height)? So, if #two is longer than #one, #one should expand to match; if #two is shorter, #one should be cut off (and overflow according to its overflow setting).

I imagine flexbox may be my saviour here (as it so often is), but I can't work out how.

Answer 1

If the first container has an absolute child it takes away the document flow and it will always be controlled by the height of the second flex child. if you change the content of the #two to more you see it grows correctly. look here:

demo: http://codepen.io/anon/pen/NbWmdB

html:

<div class="wrapper">
  <div id="one">
    <div class="one-inner">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div id="two">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. amet.
  </div>
</div>

css:

.wrapper {
  display:flex
}

#one {
  background:red;
  position:relative;
  flex:1;
  overflow:auto
}

.one-inner {
  position:absolute;


}

#two {
  background:green;
  flex:1;
}

hope that helps

Answer 2

It's easy with flexbox:

• Use a column layout so that the height is the main size
• Force a line break after the first element, so that the flex items appear side by side
• Set flex-basis: 0px to let it have no height initially, and then let it grow to fill the available space with flex-grow: 1.
• Use some overflow different than visible. Or, if you want the contents to overflow, use min-height: 0.

.wrapper {
  display: flex;
  flex-flow: column wrap;
  margin: 10px;
}
.one {
  flex: 1 1 0px;
  page-break-after: always;
  break-after: always;
  overflow: auto;
}
.one, .two {
  border: 1px solid;
  width: 50%;
}

<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

However, forced line breaks are not widely supported. So you can also try good old tables:

• Add an inner wrapper to the first cell
• Make it absolutely positioned. Since absolutely positioned elements are taken out-of-flow, their content have no impact on the height of the container.
• Let it fill the relatively positioned cell completely with top, right, bottom, left.

.wrapper {
  display: table;
  width: 80%;
  table-layout: fixed;
  margin: 10px;
}
.one, .two {
  display: table-cell;
  position: relative;
  border: 1px solid;
}
.one-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

Answer 3

Assuming I understand this correctly.

I personally like the padding-bottom with overflow as needed. I use this method a lot when adding div layers for responsive online designers and need to constrain all size by percentage.

.wrapper {display: flex; padding-bottom: 56.25%; overflow: hidden}
#one {background:green}
#two {background:yellow;}

<div class="wrapper">
  <div id="one">
    Some content<br>
    Some content<br>
    Some content<br>
    Some content<br>
</div>
  <div id="two">
    Some content
  </div>
</div>