Scrolling element inside a fill-height element

Question

I need to create a web layout with a header and a main area. The header's height will grow with its content and the main area will fill the remaining vertical space. Cool, this is easily done either with flex or grid. BUT! Inside the main area I need another element (let's call him badboy) which can have a lot of content and I need it to scroll, not to stretch my main area beyond the lower border of my page.

For the main area I have tried flex with flex-grow: 1 or grid row with size auto. But since such elements do not have a specific height, the badboy always stretches the main element so no overflow happens anywhere.

My HTML:

<div class="app">
  <header></header>
  <main>
    <div class="badboy"></div>
  </main>
</div>

The Layout:

the layout

If only I could fix the height of the header to a specific height, I could use calc to set the main area's height exactly and problem solved. But my header needs to grow with content. There already is a similar question here saying its impossible, but it is 5 years old and CSS has come long way since then.

Please check this url i think this will help you: https://stackoverflow.com/questions/54564976/grid-with-viewport-height-and-inner-scrolling-div "check first Answer." — Mohit Gupta, Feb 07 '19 at 08:33
Possible duplicate of [Grid with viewport height and inner scrolling div](https://stackoverflow.com/questions/54564976/grid-with-viewport-height-and-inner-scrolling-div) — Mohit Gupta, Feb 07 '19 at 08:35
Oh, that question contains an interesting solution which does the job. I think I discovered another solution which might not be as tricky (see my answer below). — lishaak, Feb 07 '19 at 09:58

lishaak · Answer 1 · 2019-02-07T10:53:04.120

Ok, so by digging around some more I have come up with this solution with CSS grid. I don't know if this is hacky or just regular stuff, but it seems to work.

.app {
  width: 100vw;
  height: 100vh;
  grid-template-columns: 100%;
  grid-template-rows: fit-content(1px) minmax(1px, auto);
  display: grid;
}

header {
  background: lightgray;
}

main {
  background: gray;
}

.badboy {
  max-width: 40rem;
  margin: 0 auto;
  max-height: 100%;
  overflow-y: auto;
  background-color: white;
}

Scrolling element inside a fill-height element

1 Answers1