Material UI grid with independent scrolling columns

Question

I'm looking to make multiple scrolling columns using Material UI in React. I had a way of doing it in bootstrap with flex, but I can't get it to translate over. I have put together a demo of a hacky way to do it that requires knowing the size of the contents above what you're trying to scroll (in this case, the AppBar)

https://codesandbox.io/s/pmly895mm

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

.grid-container {
  height: calc(100% - 64px);
}

.grid-column {
  height: 100%;
  overflow-y: auto;
}

In this demo, I set all of the heights to 100% (html, body, #root) and then created two classes grid-container with a height of 100% - AppBar height and grid-column with a height of 100% and an overflow-y of auto.

In Bootstrap, I would apply these classes to the row and column elements respectively

.flex-section {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;

  overflow: auto;

  min-height: 100%;
}

And it wouldn't matter what was above the elements because flex took care of the heights.

Specifically, I am looking to avoid having to do height: calc(100% - 64px) as this requires me knowing the element heights beforehand. I'm going to have some pages where I'd like to put some content above the scrolling area that will have dynamically tall content.

Solution 1

In my determination to recreate how I used to do it in bootstrap (https://jsfiddle.net/aq9Laaew/226591/) I was actually able to get it working in Material UI as well. And since I wasn't able to find any sort of examples of this online for this specific use case (React / Material UI scrollable columns), hopefully this will help someone else.

Here is the example: https://codesandbox.io/s/z24wl3n58m

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%;
}

.flex-no-shrink {
  flex-shrink: 0;
}

What I was missing was setting the flex on the root. Once we do that, then we can utilize flex-section, flex-col-scroll, and flex-no-shrink (the latter of which is used to prevent elements above the scrolling from being compressed)

Solution 2

2020 Update

FWIW I was just able to add these two style properties to a Box component to achieve a scrollable <div> column:

<Box style={{maxHeight: '100vh', overflow: 'auto'}}>...</Box>

Solution 3

You just need to make your navbar fixed. It will remain intact to the top. After that, add a padding to you grid container which is going to have all your content. You can even give percentage padding to make sure responsiveness.

Here is the working codesandbox: Fixed Navbar

Let me know if the issue still persists.

Comments

[AKrush95]

Thank you for your response. This is a perfect example of what I am trying to achieve. However, I do not think that making the bar fixed vs static would help. Now that it's static, you have to add padding to each view just to remove the overlap. Moving on, you added some text above the initial grid. That's great. That's what I also want to be able to do. But, as you can see, there is another scroll bar now on the main view as well as the two columns. This can be compensated for by adding height: calc(100% - 36px); to .grid-container to compensate for the extra space from the new lines

[AKrush95]

However, this brings me back to my initial issue where I do not want to have to calculate / determine the height of the content above my scrollable content; it would amazing if I were able to do it dynamically as was done with flexbox. I'm going to put together an example of how it worked in bootstrap. Maybe that will help.

[AKrush95]

I actually think I figured it out in my determination to create my bootstrap version (see here: jsfiddle.net/aq9Laaew/226591)

[kokeksibir]

Thank you for sharing your resolution. It helped me a lot. For material-ui 1.5.1 I had to add flex-wrap: nowrap to flex-section class. Also I needed to remove flex-direction: column.

[JimmyUK1]

Thanks for this. I have one issue though... if the text in the h1 tags are just a little longer, it seems to fall apart. Can you help?

[Philippe]

This helped a lot! Thanks very much.

[yoges nsamy]

Works with Grid too

[Uros Randelovic]

Davis thank you! @yogesnsamy unless you center it vertically xD