CODEWITHSUNDEEP
css
Riz
Riz

Reputation: 10246

Set height of div equal to another div

enter image description here

How can we set height of green box equal to the height of red box with scroll in green box. Please note that we cannot set height of red box, it is dynamic and may be changed as content changes.

https://jsfiddle.net/guqfz069/13/

.container{
  display: flex;
  height: 100%;
}


.left{

  background-color: #f00;
  width: 60%;
  height: 100%;
}

.right{
  background-color: #0f0;
  width: 40%;
}
<div class="container">
  <div class="left">
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
   
  </div>
  <div class="right">
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
  </div>
</div>

Upvotes: 0

Views: 152

Answers (6)

Ahmad MRF
Ahmad MRF

Reputation: 1384

with position and absolute for .right you can do that

.container{
  display: flex;
  height: 100%;
  position: relative;
}


.left{
  background-color: #f00;
  width: 60%;
  height: 100%;
}

.right{
  background-color: #0f0;
  width: 40%;
  position: absolute;
  right: 0;
  height: 100%;
  overflow-y: auto;
}
<div class="container">
  <div class="left">
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
   
  </div>
  <div class="right">
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    
        Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
    Here is the sample content <br />
  </div>
</div>

Upvotes: 4

Kritish Bhattarai
Kritish Bhattarai

Reputation: 1661

Add height:auto to .left

.left{
  background-color: #f00;
  width: 60%;
  height: auto;
}

UPDATE

Based on @Riz's comment
I believe we'll need some js to achieve this

const leftHeight = document.querySelector('.left').offsetHeight;
document.querySelector('.right').style.height = `${leftHeight}px`;

since offsetHeight includes margin and padding, it'll be better if box-sizing: border-box is set

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

    .container {
      display: flex;
      width: 100%;
    }
    
    .container>* {
      flex: 1;
    }
    
    
    .left {
    
      background-color: #f00;
      width: 60%;
    
    }
    
    .right {
      background-color: #0f0;
      width: 40%;
    }

   
 <div class="container">
      <div class="left">
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
    
      </div>
      <div class="right">
    
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
    
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
    
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
        Here is the sample content <br />
      </div>
    </div>

DEMO HERE: https://jsfiddle.net/ayL75j4h/

Upvotes: 1

eh masuk
eh masuk

Reputation: 31

Use-->> max-height:130px; overflow:auto; -->> in both class left and right, like this

    .left{

  background-color: #f00;
  width: 60%;
  height: 100%;
  max-height:130px;
  overflow:auto
}

.right{
  background-color: #0f0;
  width: 40%;
  max-height:130px;
  overflow:auto
}

and u will get this enter image description here

Hope this helped you

Upvotes: 0

poashoas
poashoas

Reputation: 1894

If you add align-items: flex-start and maybe add height: 100%; to child elements?

Upvotes: 0

nicedev666
nicedev666

Reputation: 54

I would use CSS Grid to achieve this effect.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100%;
}

This will make a grid with two columns, one for .left, one for .right with the same width & height; The fr (fractional unit) makes sure of that.

Let me know if this helps you

Upvotes: 0

Related Questions