How to make a parent div the same height as its first child?

Question

Here's a picture:

!

My div2 and div3 contain dynamic content, such that their heights will be different each time. div2 will always be much shorter than div3 though.

I am looking for a way to force the height of div3 to be that of div2's, and then for div1 to neatly contain them both, so the result should look like this:

But I'm not sure how to do this. Any advice?

Made a fiddle: https://jsfiddle.net/q93uvgcs/

please read [how-to-ask](https://stackoverflow.com/help/how-to-ask) and show us in code what you've tried — Ram Segev, Sep 22 '19 at 09:09
Not sure why this is downvoted so much? I didn't initially share a fiddle because I wasn't sure if it was necessary because of how simple the markup was. — Ryan Peschel, Sep 22 '19 at 09:16

mulsun · Answer 1 · 2019-09-22T10:06:47.050

.div1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: fit-content(0);
  border: 1px solid;
}

.div2 {
  border: 1px solid #000;
}

.div3 {
  width: 300px;
  overflow-y: auto;
  border: 1px solid #000;
  margin-left: 50px;
}

<div class="div1">
  <div class="div2">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
  <div class="div3">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
</div>

You can use display:grid layout to achieve what you would like to do. On the parent setting columns to 1fr each, will fit them in the container horizontally, and setting fit-content(0) for rows, will set first's height to it's content, thus forcing the other one comply with the rule.

This doesn't solve the issue unfortunately. The height of div2 should be fit-content. — Ryan Peschel, Sep 22 '19 at 09:40
I've updated my answer. Right now div2's height should be the defining height for div3. — mulsun, Sep 22 '19 at 09:45
Ah, CSS grid. Never used that before (nor not sure if I can even support it). This is close, but I still need div1 to fit the children (such that all 3 of their heights are basically the same). — Ryan Peschel, Sep 22 '19 at 09:46
Also, I noticed that div3 is overflowing outside the border of div1. — Ryan Peschel, Sep 22 '19 at 09:48

How to make a parent div the same height as its first child?

1 Answers1