Html Question posted in
Some basic documentation can be found here.

Vertical space sharing inside a div (HTML)

I have a parent div of max-height 80 rem. I have 2 child divs which don’t have fixed heights (depend on content inside). I want them to share 50-50 space if both their heights would’ve exceeded 40 rem. Otherwise have their max heights set to 70 rem each. How can I achieve this

Tried using setting their max heights to 70 each anyway, causes them to overflow the outer div as expected. Set max-heights to 50 each is inefficient in terms of space utilisation

Tags:

2

Answers


  1. 0 
    You can use CSS Flexbox and JavaScript to achieve this behavior. CSS alone will not fix your problem. So JavaScript is necessary to adjust the heights dynamically.

Here is an example


    

    

        function adjustChildHeights() {
      const parent = document.querySelector('.parent');
      const child1 = document.querySelector('.child1');
      const child2 = document.querySelector('.child2');

      // Reset max-height to 70rem initially
      child1.style.maxHeight = '70rem';
      child2.style.maxHeight = '70rem';

      // Calculate total content height
      const child1ContentHeight = child1.scrollHeight;
      const child2ContentHeight = child2.scrollHeight;

      if (child1ContentHeight > 40 * 16 && child2ContentHeight > 40 * 16) {
        // If both exceed 40rem, set their heights to 50% each
        child1.style.maxHeight = 'none';
        child2.style.maxHeight = 'none';
        child1.style.flex = '1 1 50%';
        child2.style.flex = '1 1 50%';
      } else {
        // Otherwise, revert to initial max-heights
        child1.style.flex = '1 1 auto';
        child2.style.flex = '1 1 auto';
      }
    }

    // Adjust heights on DOM load and resize
    window.addEventListener('load', adjustChildHeights);
    window.addEventListener('resize', adjustChildHeights);
    

        .parent {
      max-height: 80rem;
      display: flex;
      flex-direction: column;
      overflow: hidden;
     background-color: DodgerBlue;
        
    }

    .child {
      flex: 1;
      overflow: auto; /* Ensures content scrolls if it exceeds the height */
      max-height: 70rem; /* Initial max-height */
      background-color: #f1f1f1;
      margin: 1px;

    }
    

        <div class="parent">
      <div class="child child1">
    Box 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <div class="child child2">
    Box 2
      </div>
    </div>
    

    

    

    **JavaScript Adjustment:**
    
The JavaScript function adjustChildHeights checks the content heights of both child divs.
    

     - If both exceed 40rem, it adjusts the flex property to ensure they take up 50% of the parent’s height each.
    

     - If either does not exceed 40rem, it sets the flex property back to auto and the max-height to 70rem.
    Login or Signup to reply.
  2. 0

    CSS Code

    .parent{
    max-height: 80rem;
}
.child{
    max-height: 40rem;
    overflow-y: auto;
    overflow-x: hidden;
}

    Explanation

    1. parent:

    • Limits the height of .parent elements to a maximum of 80 rem.

    2. child:

    • Limits the height of .child elements to a maximum of 40 rem.
    • Adds a vertical scrollbar if content exceeds 40 rem.
    • Hides horizontal overflow.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search