1

I am trying to implement a simple view. This view is comprised of a top view and a bottom view.

The top is static and uninteresting.

The bottom will contain content that will overflow that component's boundaries. In the event of this, I want it to show a scroll overflow.

This is roughly how I want it to look (gif screen recording)

The issue is that I'm in a situation where they layout is built in CSS grid. Don't ask why, this is not up for change. Also using viewport units are off the table.

If you read the code below, the layout roughly translates to:

"Create two rows. The first row will have a defined height. The second row will fill in the rest of the space available"

While this works when the content of the bottom row is small, it breaks when the content of the bottom row overflows. Specifically, it expands the size of .bottomRow and the component goes off screen without overflowing.

Here is a screen recording that illustrates this behavior

Whats happening here is that the blue div you see is taking on a height to match the overflowing size of its children. I want it to preserve its size, and overflow instead.

Here's my code so far (this is not exactly the code from the screen recordings. Just the essentials)

.layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: max-content auto / 1fr
}

.topRow {
    height: 50px;
    width: 100%
}

.bottomRow {
    width: 100%;
    height: 100%;
    /* max-height: ???; works if set to a static value */
    box-sizing: border-box;
    border: 5px solid black;
    overflow-y: auto;
}

<div class='layout'>
   <div class='topRow'/>
   <div class='bottomRow'>
   // ENOUGH CONTENT TO OVERFLOW
   </div>
</div>

The only way I've been able to successfully implement this is by setting a max-height.

See screen recording

But to make this dynamic, I would have to add an event listener for component resizing. Not ideal!

I've also tried using max-height: -webkit-fill-available, and while this worked on Chrome, it doesn't work against other major browsers.

Please help! Overall, I'm trying to find a solution that avoids 3rd party libraries, JavaScript, event listeners, and is cross browser compatible.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
adrayv
  • 359
  • 1
  • 3
  • 8
  • it works fine , even without height and width . https://codepen.io/anon/pen/Oebogq – G-Cyrillus Jun 20 '19 at 00:43
  • hi adrayv, you must either use `height: 100vh` on the `.layout` or add `html,body{height: 100%}` ([ref](https://stackoverflow.com/questions/1575141)) as in the codepen shared above and you are good to go! also see https://stackoverflow.com/questions/46158276/ – kukkuz Jun 20 '19 at 01:22

1 Answers1

-1

I had the same issue today and setting the grid-template-rows to a value of max-content 1fr did the job.

CSS needs a fixed value for doing a scrolling behaviour. auto does not count as such, buuut 1fr does on the other hand!

Michelle

Dharman
  • 30,962
  • 25
  • 85
  • 135
M1chelle99
  • 9
  • 2