How to set larger column's height equal to small one in pure css?

Question

I'm trying to make 2 divs with the same height:

http://image.prntscr.com/image/32ca3f340fba4e2dbd3c7d1e434f0938.png

<div class="parent">
  <div class="small">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  </div>
</div>

Example

.parent {
  background: red;
}
.small {
  background: blue;
  float: left;
  width: 65%
}
.large {
  background: green;
  float: right;
  width: 35%
}
.clear {
  clear: both
}

<div class="parent">
  <div class="small">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>
  </div>
  <div class="clear">
  </div>
</div>

I want dynamic(large one) div to have the same height as static(small one) div. Dynamic div is always longer than static div. I have to do it with css (no jquery). I've found several solutions how to make static div as large as dynamic(e.g. table or flex), but I couldn't find any solution how to make dynamic as small as static.

CSS - Equal Height Columns? - is not the answer. Here columns are made all as large as the longest one.

Once more: I need to make dynamic div as small as static. Dynamic div should have scrollbar.

Another limitation - parent, static and dynamic div height/width should not be set to some permanent value in px.

score 1 · Accepted Answer · answered Dec 01 '16 at 14:23

Here is the trick.

Add position: relative on parent.
Place your dynamic div element (With large height) with position: absolute inside parent.

Following css will be needed for this:

.parent {
  position: relative;
}
.large-div {
  position: absolute;
  overflow: auto;
  left: 300px;
  bottom: 0;
  top: 0;
}

Note: You can change left, bottom and top values as per your needs.

.container {
  border: 1px solid #000;
  margin-bottom: 20px;
  position: relative;
  padding: 10px;
}

.container div {
  border: 1px solid #000;
  padding: 10px;
  width: 250px;
}
.container div p {
  margin: 0;
}
.large {
  position: absolute;
  overflow: auto;
  bottom: 10px;
  left: 300px;
  top: 10px;
}

<div class="container">
  <div class="small">
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
  </div>
  <div class="large">
    <p>
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
     </p>
  </div>
</div>

<div class="container">
  <div class="small">
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
  </div>
  <div class="large">
    <p>
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
     </p>
  </div>
</div>

It looks great! But These permanent(hardcoded) values as width: 250px; and left: 300px; won't work for me, since these divs are inside "resizable" content. I need to achieve behavior without permanent values. — Anna Osiatnik, Dec 01 '16 at 15:04
@AnnaOsiatnik This was just an example. You can modify this example to fit for your needs. here is the updated [**Fiddle**](https://jsfiddle.net/v5nwdg8d/2/). — Mohammad Usman, Dec 01 '16 at 15:14

score 0 · Answer 2 · edited Dec 01 '16 at 14:36

If i understand correctly, there is a fixed height div, e.g. 150px which has fixed content in, and a dynamic div which could have lots of content in.

the best thing to do is set a height for both, and then add this to the dynamic div:

overflow-y: scroll

.parent-div div {
  width: 50%;
  padding: 15px;
  box-sizing: border-box;
  float: left;
  height: 150px;
  border: solid 1px grey;
}
.dynamic-height {
  overflow-y: scroll;
}

<div class="parent-div">
  <div class="fixed-height">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="dynamic-height">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </div>
</div>

How to set larger column's height equal to small one in pure css?

Example

2 Answers2