How it works...

The IpsumContent component is just a convenience component that holds paragraphs of content so that you don't have to repeat it in every panel. Let's start by looking at the styles used in this example:

const styles = theme => ({
  panelDetails: {
    flexDirection: 'column',
    height: 150,
    overflow: 'auto'
  }
});

Panel content uses flex box styles to lay out its content. It flows according to row direction by default, so you have to set the flexDirection style to column if you want the content to flow in a top-down direction. Next, you can set a fixed height for your panel content—in this case, it's 150px. Finally, the overflow style set to auto will enable vertical scrolling for the panel content.

You can then apply the panelDetails class to each of your ExpansionPanelContent components:

<ExpansionPanelDetails className={classes.panelDetails}>
  <IpsumContent />
</ExpansionPanelDetails>