search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Containing grid in viewport with scrollable children #129

Closed spentacular closed 6 years ago

spentacular commented 6 years ago

I'm trying to create a layout where everything is contained within the viewport and children scroll when they overflow. It doesn't appear that a child item in a grid with a height: 100% or max-height: 100% only fills the parent:

viewport-grid

I can achieve it if a set a div in a grid-area and then absolute position that element inside it:

https://codepen.io/spentacular/pen/MVbEva?editors=0100

How would you go about creating this type of layout?

Thanks!

IOIIOOIO commented 6 years ago

I'm no expert but I actually think that's quite a cool solution. I don't understand why you need the wrapper on the scrolling div though. Here I forked yours and moved the scrollable class to the main grid-item:

https://codepen.io/IOIIOOIO/pen/LdroJN?editors=1100

IOIIOOIO commented 6 years ago

Here I added overflow: hidden to the body and removed the sticky class. I also removed height: 100% from the scrollable class because it seemed to break your overflow. I'm testing on Chrome 65.

https://codepen.io/IOIIOOIO/pen/PRavXE?editors=1100

IOIIOOIO commented 6 years ago

I see in your image that you actually want the sidebar and the main to scroll together?

spentacular commented 6 years ago

@IOIIOOIO I added the wrapping scrollable div because we had a few areas where we have a sticky header in the main section so only it's content would be scrollable. Kind of like Spectrum's layout:

spectrum

Yep, that height definitely was breaking it, doh!

And both the sidebar/main can scroll independently, I know that would probably require some kind of scroll sync JS hacks to make that work better.

spentacular commented 6 years ago

@IOIIOOIO doh, a lot easier than I realized.

On any grid-area, as long as you cause it to need block formatting context then it won't fill the area with the height/width of the content.

Here's a rough example:

https://codepen.io/spentacular/pen/QmBaGy

You could definitely bring up the grid so it's only at the .App level, but I'm just playing around with a couple of ideas right now.

Absolute was doing the same thing above, causing the block formatting context, but I find the hidden way a bit less hacky (and I think it will work in IE11, it doesn't like the absolute way).