Two divs side by side, equal height defined by one

Question

Given the following markup:

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

What is the easiest way to make both divs of the same height, which is the calculated height #two(in particular, with the height of auto, but adhering min-height)? So, if #twolonger #one, it #oneshould expand to fit; if #twoshorter, #oneit should be turned off (and overfilled as configured overflow).

I believe that flexbox may be my savior here (as it often happens), but I cannot figure out how to do it.

Answer 1

, , . #two , , . :

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;
}

,

Answer 2

flexbox:

• ,
• ,
• flex-basis: 0px, , , flex-grow: 1.
• overflow, . , , , 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>

Hide result

. , :

• . , .
• 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>

Hide result

Answer 3

, .

I personally like filling the bottom with overflow as needed. I use this method a lot, adding div layers for responsive online designers and should limit all sizes as a 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>

Run codeHide result