Scrollable area

[blurymind]

How does one create a grid that has cells with min-height and instead of distributing the size between them - creates a scroll-able area when min-height is reached

[azz]

👋 Hey, could you create a fork of this codesandbox to help illustrate the issue?

[blurymind]

I was able to get it by giving the cells min-height and the grid a overflow-y="auto" max-height( to prevent it from over expanding - it's inside another grid) and columns="repeat(auto-fit,minmax(300px,1fr))"

I had to expose 3 new css values to do it. Was wondering if there is a better way to do it.

Could submit a PR to expose those if you like? Cell:

  max-height: ${props => props.maxHeight};
  min-height: ${props => props.minHeight};
  overflow-x: ${props => props.overflowX};
  overflow-y: ${props => props.overflowY};

Grid

  max-height: ${props => props.maxHeight};
  min-height: ${props => props.minHeight};
  grid-auto-rows:  auto;
  overflow-x: ${props => props.overflowX};
  overflow-y: ${props => props.overflowY};

this doesn't work if I don't set grid-auto-rows: auto on the grid btw. It seems to not break other things to have it that way - so I left it the default

[blurymind]

I still have a problem with this setup. I wish I didn't have to pass the red grid a max-height value in order to get overflow-y to work. Is there some way to force it to not expand and push everything down without passing an eyeballed value