How to setup a div in html to fill parent and to show a scroll bar if the child elements gets to big-CodePudding

I'm new to CSS and HTML and experimenting with Angular. I would like to have a web page without a 'main' scroll bar (electron app).

Within this page I would have 3 divs. One of them (the one in the middle), would contain a child with a big height. This is why this middle div would need to overflow with a scroll bar.

In other terms, I would like that middle div to be the adjusted height whenever I resize the height of the window. And it would fill all the available space.

I wonder if it is possible to do this with CSS? Or do I have to write javascript code to set the height of this middle component equal to the height of the parent minus the others elements?

<div>
  <div>
    I would like that the scroll zone expands down to the bottom of the browser
    window. (this text should always be visible)
  </div>
  <div class="scroll-zone">
    scroll-zone
    <div class="big-box">big-box</div>
  </div>
  <div>After scroll zone (should always be visible)</div>
</div>

.scroll-zone {
  height: auto; /*Do I really have to set a fixed size here ?*/
  overflow: auto;
}

.big-box {
  height: 1000px;
  border-style: solid;
  border-color: black;
}

(non working) example : https://stackblitz.com/edit/angular-ivy-1szgga?file=src/app/app.component.html

CodePudding user response：

<div>
<div>
   I would like that the scroll zone expands down to the bottom of the browser
   window. (this text should always be visible)
</div>
<div style="max-height: 400px;overflow: auto">
   scroll-zone
   <div style="background-color: yellow;height: 500px">big-box</div>
</div>
<div>After scroll zone (should always be visible)</div>
</div>

CodePudding user response：

You have to set height to scroll-zone as setting height to to will take height of the it's child big-box and overflow will not work as, your content will never overflowing, so if you set a fix height to scoll-zone div than the big-box div size will overflow the content and vertical scollbar will appear.