Clipped Drawer Example Overflow Bug

[bshin19]

In the clipped drawer example, the top of the scroll bar is clipped beneath the header when it overflows (as the example does). An extra child element is added to the top to prevent this from causing content to be hidden beneath the header, but that still leaves the scroll bar flowing beneath the header.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When drawer content overflows, the scroll bar continues beneath the header and is not fully visible.

Expected Behavior 🤔

The scroll bar appears in it's entirety beneath the header when drawer content overflows in this example.

Steps to Reproduce 🕹

https://material-ui.com/components/drawers/

Scroll to 'clipped under the app bar' and look at it. Optionally add display: none to the app bar to see the rest of the scroll bar that's cut off currently.

Context 🔦

I believe these examples should provide best practices and be as close to ready out of the box as possible. The cut off scroll bar looks visually unappealing.

Your Environment 🌎

Tech	Version
Material-UI	v4.?.?
Browser	chrome, firefox

[oliviertassinari]

@bshin19 What do you think of this patch? Do you want to submit a pull request? :)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index 0b7d71428..62414adbd 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -30,12 +30,13 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    drawerContainer: {
+      overflow: 'auto',
+    },
     content: {
       flexGrow: 1,
       padding: theme.spacing(3),
     },
-    // necessary for content to be below app bar
-    toolbar: theme.mixins.toolbar,
   }),
 );

@@ -59,27 +60,29 @@ export default function ClippedDrawer() {
           paper: classes.drawerPaper,
         }}
       >
-        <div className={classes.toolbar} />
-        <List>
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-        <Divider />
-        <List>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
+        <Toolbar />
+        <div className={classes.drawerContainer}>
+          <List>
+            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+              <ListItem button key={text}>
+                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            {['All mail', 'Trash', 'Spam'].map((text, index) => (
+              <ListItem button key={text}>
+                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
       </Drawer>
       <main className={classes.content}>
-        <div className={classes.toolbar} />
+        <Toolbar />
         <Typography paragraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
           ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum