Assign height to one element relative to another in css

Question

I have 2 divs. The first div has a content, which can vary, ie I can not assign its height in the css. That's why I always put it like: Height: auto; The content of div1 is dynamic then the height varies.

I have a second div that will usually have more text than the div1. I want the div 2 to fit the height of div1, and to have a scroll bar on the y-axis. The scroll should only be in div2 How can I do it?

https://jsfiddle.net/7jcozszx/

.div1{
  background:blue;
  height: auto;
  width: 300px;
  display:inline-block;
  float:left;
}

.div2{
  background:red;
  height: 300px; /*height of div1 */
  width: 300px;
  display:inline-block;
  overflow-y:scroll;
}

<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint 
  cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad 
  deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id 
  quidem nemo!
</div>

Possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Deepak Yadav, Apr 25 '17 at 14:12

score 1 · Answer 1 · answered Apr 25 '17 at 13:59

I'd use FlexBox for this.

.container {
  display: flex;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  height: 300px;
  width: 300px;
  overflow-y: scroll;
}

<div class="container">
  <div class='div1'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
  </div>

  <div class='div2'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
  </div>
</div>

Make sure you just add a .container.

Preview

FlexBox Browser Support: http://caniuse.com/flexbox

Thanks but the scroll should only be in div2. And I would like if you can another solution without using flexbox. — yavg, Apr 25 '17 at 14:03
@yavg Scroll is there only in one div. Like how you have given. Oh wait... You want the right to be non-scrollable? — Praveen Kumar Purushothaman, Apr 25 '17 at 14:35

score 1 · Answer 2 · answered Apr 25 '17 at 14:25

Set the second div with position:absolute; and height:100%

This way, only the first div controls the height of the container.

body {
  position: relative;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  width: 300px;
  height: 100%;
  position: absolute;
  left: 300px;
  top: 0;
  overflow-y: auto;
}

<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
  sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>

Updated fiddle

score 0 · Answer 3 · answered Apr 25 '17 at 14:05

0

If you don't want to set a fixed height for div1's height, then you can use JS to calculate the height of div1 and apply it to div2.

document.querySelector('.div2').style.height = document.querySelector('.div1').offsetHeight

answered Apr 25 '17 at 14:05

Babar Al-Amin

3,939
1
16
20

I appreciate your help, but is there any way to do it in css? – yavg Apr 25 '17 at 14:09

score 0 · Answer 4 · answered Apr 25 '17 at 14:22

I change you html by putting div2 inside div1. The made it absolute to div2. By this div2 takes the height of div1. Look at the code below for more understanding. You could use flexbox also.

.div1{
  background: blue;
    height: 100%;
    width: 300px;
    display: inline-block;
    float: left;
    position: relative;
}

.div2{
    background: red;
    /* max-height: 300px; */
    width: 300px;
    display: inline-block;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    right: -300px;
    bottom: 0;
}

<div class='div1'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

<div class='div2'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>
</div>

Assign height to one element relative to another in css

4 Answers4

Updated fiddle