Set a div element's height dependent on other div element

Question

I want to create a layout where a .parent div has two children, .left and .right, both taking up equal halves of the entire width and stacked side by side. The height of the .parent should be the same as the .left child, while the .right child should have the same height as the .left. Here's an example image:

The yellow box wrapping the two containers is .parent, which has its content-box height (i.e., without padding, border, margin) equal to .left. The red box at the left has the height as minimum as possible to wrap the content. The pink box at the right has scrollbars to manage exceeding content.

I've tried using flex and grid to create this layout, but I was unsuccessful. Can someone please help me code or explain how I can achieve this layout? Thank you.

Answer 1

You can use display: grid; and the trick with .right { height: 0; min-height: 100%; }:

* {
  box-sizing: border-box;
}

.wrap {
  border: 5px solid yellow;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  border: 5px solid red;
}

.right {
  min-height: 100%;
  height: 0;
  overflow: auto;
  border: 5px solid blue;
}

<div class="wrap">
  <div class="left">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi hic dolor iusto nemo deserunt fuga dolores ullam praesentium nihil molestias!
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis labore beatae ratione illum pariatur voluptates consequatur enim nisi ipsum, assumenda eaque rem dolorem voluptas ducimus! Error debitis est rerum eos quam excepturi optio. Dolorem aut voluptate nulla fugiat autem soluta minus adipisci repellendus delectus pariatur, quis deserunt aliquam expedita dolores corrupti qui veritatis accusantium nobis ad earum distinctio esse quaerat. Voluptatibus ab, earum harum eius architecto aspernatur labore dolorem repudiandae amet. Sequi quidem modi molestiae sapiente! Porro delectus temporibus distinctio architecto, quasi id tenetur eos magni consequatur amet itaque, nostrum vel! Saepe, neque. Suscipit sed velit fugiat quae accusamus fuga?
  </div>
</div>

Answer 2

try this

* {
      box-sizing: border-box;
    }
    .wrap {
      border: 5px solid yellow;
      position: relative;
    }

    .left {
      width: 50%;
      border: 5px solid red;
    }
    .right {
      width: 50%;
      overflow: auto;
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      border: 5px solid blue;
    }

<div class="wrap">
    <div class="left">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi hic dolor iusto nemo deserunt fuga dolores ullam praesentium nihil molestias!
    </div>
    <div class="right">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis labore beatae ratione illum pariatur voluptates consequatur enim nisi ipsum, assumenda eaque rem dolorem voluptas ducimus! Error debitis est rerum eos quam excepturi optio. Dolorem aut voluptate nulla fugiat autem soluta minus adipisci repellendus delectus pariatur, quis deserunt aliquam expedita dolores corrupti qui veritatis accusantium nobis ad earum distinctio esse quaerat. Voluptatibus ab, earum harum eius architecto aspernatur labore dolorem repudiandae amet. Sequi quidem modi molestiae sapiente! Porro delectus temporibus distinctio architecto, quasi id tenetur eos magni consequatur amet itaque, nostrum vel! Saepe, neque. Suscipit sed velit fugiat quae accusamus fuga?
    </div>
  </div>

Answer 3

You can use Element.offsetHeight to get the numeric height of left column, measured in pixels(add 'px' to the value). It includes padding and border. also set align-items:flex-start; otherwise, flex-box will stretch the smaller div automatically. Set the height of right-column equal to height of left-column. Be aware of your margins.

const leftColumn = document.querySelector('.container .left');
const rightColumn = document.querySelector('.container .right');
rightColumn.style.height = leftColumn.offsetHeight + 'px';

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

.container {
  display: flex;
  border: 1px solid red;
  align-items: flex-start;
}

.container .column {
  width: 50%;
}

.container .left {
  border: 5px solid green;
}

.container .right {
  overflow: auto;
}

<div class="container">
  <div class="left column">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi hic dolor iusto nemo deserunt fuga dolores ullam praesentium nihil molestias! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis labore beatae ratione illum pariatur voluptates consequatur enim nisi ipsum, assumenda eaque rem dolorem voluptas ducimus! Error debitis est rerum eos quam excepturi optio.
  </div>
  <div class="right column">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis labore beatae ratione illum pariatur voluptates consequatur enim nisi ipsum, assumenda eaque rem dolorem voluptas ducimus! Error debitis est rerum eos quam excepturi optio. Dolorem aut
    voluptate nulla fugiat autem soluta minus adipisci repellendus delectus pariatur, quis deserunt aliquam expedita dolores corrupti qui veritatis accusantium nobis ad earum distinctio esse quaerat. Voluptatibus ab, earum harum eius architecto aspernatur
    labore dolorem repudiandae amet. Sequi quidem modi molestiae sapiente! Porro delectus temporibus distinctio architecto, quasi id tenetur eos magni consequatur amet itaque, nostrum vel! Saepe, neque. Suscipit sed velit fugiat quae accusamus fuga?
  </div>
</div>