CODEWITHSUNDEEP
htmlcss
1seanr
1seanr

Reputation: 706

How do you make one child div determine the parents height and force a second child div to fit inside the parents height with a scroll bar

So I have 2 children div inside a parent div. What I want to do is have the left hand child div determine the height of the parent. And then have the second right hand side child div always be the same height as the parent regardless of how much content is inside this. This would be super easy if I could hard code the size of the left hand child div but that left hand child can have a varying height due to the text are inside it

see attached code.

At the moment the right hand side is making the parent bigger then the left. And the final outcome I want is for it to always be the height of the parent no matter how big you make the left text area.

https://jsfiddle.net/e29o6jnz/

<script>
#topDiv {
  background-color: lightblue;
    max-height: 17rem;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

#insideDiv1 {

}

#insideDiv2 {
    background-color: pink;
    overflow-y: auto;
    height: auto;
}
</script>

<div id="topDiv">
  <div>
    No scroll content
  </div>
    <div id="insideDiv1">
    <textarea style="margin: 0px; width: 171px; height: 131px;">hello</textarea>
  </div>
  <div id="insideDiv2" style="">
    Some inside content
     More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br><br>
  </div>
</div>

Upvotes: 0

Views: 45

Answers (1)

Falguni Prajapati
Falguni Prajapati

Reputation: 129

We can not this task with only css. For this We need to get left child div height with js and assign it to right child max-height and assign to parent div height. 

jQuery(document).ready(function(){
   $('textarea').mouseup(function(){
      var height = $(this).parent().height();

      $(this).parents().find('.parent').height(height);
      $(this).parent().next().css({'max-height' : height});
   });
   });

 .parent{ max-width:700px; border:solid 3px #ff0000; float:left; width:100%; position:relative;   }
    .right-child , .child-left{ width:40%; float:left;}
    .right-child{ overflow:auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="parent">
<div class="child-left">Lorem Ipsum is simply dummy text of the printing and    <textarea style="margin: 0px; height: 144px; width: 100%;"></textarea></div>
<div class="right-child">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>

</div>

Upvotes: 1

Related Questions