Make Height of One Div Fill Remaining Space, But Not Go Past Another Div

Question

I'm trying to do something a little tricky with css.

On my page, I have two divs that are side by side. The contents of both divs can change (it can have more of less) based on user action.

Div #1 (the left div) needs to be dependent on the height of div #2 (the right div). Div #1 should fill up the remaining space of div #2, but it shouldn't go past the height of div #2. Its overflow should be scrolled.

However div #2's height should NOT be limited, it should be able to grow or shrink as needed, with no scrolling.

I can set div #1 to a certain height and give its overflow a scroll, but if div #2 grows it looks like this:

I want div #1 to grow with div #2, but not extend past it.

In short, div #1's height needs to be dependent on div's #2.

I made a demo for this: https://stackblitz.com/edit/dependent-height-demo?file=app/app.component.css

I want the css to happen (ideally) in app.component.css, because in the real app it will be difficult to affect the styling on the components.

(EDIT: stackoverflow is saying this is a duplicate of "How can you set the height of an outer div to always be equal to a particular inner div?" It's not since this doesn't involve an inner div, there're two divs next to each other. It's different, and that question's solution doesn't help me.)

Thanks for any assistance you can offer!

Answer 1

You can do something like this -

.wrapper {
  display: grid;
  grid-template-columns: 100px 1fr;
}

.wrapper div {
  border: 1px solid red;
}

.wrapper .left {
  position: relative;
  overflow: hidden;
}

.wrapper .left .inner {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

<div class="wrapper">

  <div class="left">
    <div class="inner">
      left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br>
    </div>
  </div>

  <div class="right">
    right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right
    right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right
  </div>

</div>

What I did here is -

1. I have wrapped the content of left panel in a class called inner.
2. I have added position: absolute to inner class and added height: 100% to match the height of left panel. Left panel's height will be depended on right panel.
3. I have added overflow-y: scroll to inner class to scroll it vertically if the content is larger than the height.

Answer 2

Aside element is scrollable and height matches the one of Main:

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

#app {
  display: flex;
}

#aside {
  position: relative;
  overflow: auto;
  width: 200px;
  background: #ffc;
}

#main {
  flex: 1;
  background: #fcc;
}

.full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="app">

  <aside id="aside">
    <div class="full">ASIDE<br>Lorem...</div>
  </aside>

  <main id="main">
    MAIN
  </main>

</div>