Material UI grid with independent scrolling columns

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>

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)

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.