Scrollable panel content

The height of an ExpansionPanel component, when expanded, changes so that all of the content is visible on the screen. In cases where you have a lot of content in your panels, this isn't ideal because the panel headers aren't visible to the user. Instead of having to scroll down the entire page, you can make the content within the panel scrollable.

How to do it...

Let's say that you have three panels, each with several paragraphs of text. Rather than having each panel adjust its height to accommodate the content, you can make the panels a fixed height and scrollable. Here's the code:

import React, { Fragment } from 'react';

import { withStyles } from '@material-ui...