The height of two divs is equal to the height of the main div

Question

I have two divs on my page; sidebar and main panel.

In the sidebar, I will always have a bunch of content blocks, a number with a change all the time. And the main panel will have some content block. As a rule, the side panel will have a greater height than the main panel.

I am looking for the height of the main panel to be equal to the contents of this panel, and I am looking for a way to increase the height of the side panel to the size of the main panel. While the overflow sidebar scrolls. I do not want to set a static height for any of them, as the amount of content changes.

I am currently using a grid, but all for changing it, if there is a way to do this.

Here is the Codepen layout of what I have now: https://codepen.io/aculbreth/full/VMjRyx

.box {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 20px;
  grid-auto-columns: max-content;
  background: #efefea;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box;
  .side_panel {
    background:#fff;
    padding:20px;
    box-sizing: border-box;
    .side_panel_box {
      text-align:center;
      border: 1px solid #000;
      margin-bottom:20px;
    }
  }
  .main_panel {
    background:#fff;
    padding:20px;
    box-sizing: border-box;
    display:block;
    grid-auto-columns: max-content;

  }
}

Here is a rough layout of what I'm looking for:

Answer 1

As you noted the jQuery post, this can be done with jquery pretty painlessly. Since your CSS has been called into question, I remade it as plain css, and jQuery just sets the sidebar height to the main content height. Hope this helps!

*** Please note that in order to see that this works well, look at them on the page.

$(document).ready(function() {
  var maxHeight = $(".main_panel p").height();
  $(".side_panel").height(maxHeight);
})

.box {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 20px;
  grid-auto-columns: max-content;
  background: #efefea;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box;
}

.side_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.side_panel_box {
  text-align: center;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.main_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: block;
  grid-auto-columns: max-content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="side_panel">
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
  </div>

  <div class="main_panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi explicabo autem cupiditate, facere quas recusandae itaque voluptates sint accusantium amet illo veniam totam placeat odio magni, quaerat eligendi. Distinctio et cupiditate nemo fugit,
      praesentium, ea obcaecati dolores non amet autem sequi laboriosam labore vero fugiat dolorem qui voluptatibus omnis eos architecto, recusandae corporis rerum quod. Ea minus et odio voluptate quaerat facere incidunt, impedit repellat eos nihil quis
      modi vel molestiae, eum vitae nam nemo quasi sit aperiam unde ex fugiat. Magnam dolores, enim consectetur veniam illum error eaque ea necessitatibus nam ipsam maxime dolore temporibus animi odio eum molestiae iure. Ut quos cupiditate ad perferendis
      dolorum nemo deserunt exercitationem magni ipsa iste ea fugit expedita sapiente numquam reprehenderit dolore, quo minus excepturi asperiores sit voluptatibus accusamus necessitatibus, ipsam. Delectus iste cupiditate asperiores vero repellendus atque
      aliquid temporibus perspiciatis reiciendis quibusdam similique, nesciunt accusantium tempora voluptatem optio qui odit ullam amet eveniet illum incidunt quis quia repudiandae animi. Recusandae, consequuntur laboriosam praesentium fugit possimus
      nemo ut porro reiciendis quo aperiam et aliquam fuga consectetur fugiat veritatis necessitatibus officiis, officia repellendus, rem. Voluptatem itaque, dolores autem at, culpa cum quam ratione laborum quo totam, nemo sed dolor, hic nisi nobis illo.</p>

  </div>


</div>

Run codeHide result

CSS, . , .

.box {
  display: flex;
}

.flex-item {
  flex: 0 0 50%;
  position: relative;
}

.flex-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.side_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.side_panel_box {
  text-align: center;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.main_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: block;
  grid-auto-columns: max-content;
}

<div class="box">
  <div class="flex-item side_panel">
    <div class="flex-item-inner">
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
    </div>
  </div>

  <div class="flex-item main_panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi explicabo autem cupiditate, facere quas recusandae itaque voluptates sint accusantium amet illo veniam totam placeat odio magni, quaerat eligendi. Distinctio et cupiditate nemo fugit,
      praesentium, ea obcaecati dolores non amet autem sequi laboriosam labore vero fugiat dolorem qui voluptatibus omnis eos architecto, recusandae corporis rerum quod. Ea minus et odio voluptate quaerat facere incidunt, impedit repellat eos nihil quis
      modi vel molestiae, eum vitae nam nemo quasi sit aperiam unde ex fugiat. Magnam dolores, enim consectetur veniam illum error eaque ea necessitatibus nam ipsam maxime dolore temporibus animi odio eum molestiae iure. Ut quos cupiditate ad perferendis
      dolorum nemo deserunt exercitationem magni ipsa iste ea fugit expedita sapiente numquam reprehenderit dolore, quo minus excepturi asperiores sit voluptatibus accusamus necessitatibus, ipsam. Delectus iste cupiditate asperiores vero repellendus atque
      aliquid temporibus perspiciatis reiciendis quibusdam similique, nesciunt accusantium tempora voluptatem optio qui odit ullam amet eveniet illum incidunt quis quia repudiandae animi. Recusandae, consequuntur laboriosam praesentium fugit possimus
      nemo ut porro reiciendis quo aperiam et aliquam fuga consectetur fugiat veritatis necessitatibus officiis, officia repellendus, rem. Voluptatem itaque, dolores autem at, culpa cum quam ratione laborum quo totam, nemo sed dolor, hic nisi nobis illo.</p>

  </div>


</div>

Hide result