title: 100% height not working for Drawer, Material Design React
body: <p>I'm using the responsive drawer from the React Material UI ([Documentation][1])</p>
  
  <p>I'm trying to change it so that the Drawer will always have a height of 100%. To do this, I tried changing the height of the root class which is currently set to 430. However, when I set it to a percentage it just default to the smallest possible height.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import { withStyles } from 'material-ui/styles';
  import Drawer from 'material-ui/Drawer';
  import AppBar from 'material-ui/AppBar';
  import Toolbar from 'material-ui/Toolbar';
  import List from 'material-ui/List';
  import { MenuItem } from 'material-ui/Menu';
  import TextField from 'material-ui/TextField';
  import Typography from 'material-ui/Typography';
  import Divider from 'material-ui/Divider';
  import { mailFolderListItems, otherMailFolderListItems } from './tileData';
  
  const drawerWidth = 240;
  
  const styles = theme =&gt; ({
    root: {
      width: '100%',
      height: 430,
      marginTop: theme.spacing.unit * 3,
      zIndex: 1,
      overflow: 'hidden',
    },
    appFrame: {
      position: 'relative',
      display: 'flex',
      width: '100%',
      height: '100%',
    },
    appBar: {
      position: 'absolute',
      width: `calc(100% - ${drawerWidth}px)`,
    },
    'appBar-left': {
      marginLeft: drawerWidth,
    },
    'appBar-right': {
      marginRight: drawerWidth,
    },
    drawerPaper: {
      position: 'relative',
      height: '100%',
      width: drawerWidth,
    },
    drawerHeader: theme.mixins.toolbar,
    content: {
      backgroundColor: theme.palette.background.default,
      width: '100%',
      padding: theme.spacing.unit * 3,
      height: 'calc(100% - 56px)',
      marginTop: 56,
      [theme.breakpoints.up('sm')]: {
        height: 'calc(100% - 64px)',
        marginTop: 64,
      },
    },
  });
  
  class PermanentDrawer extends React.Component {
    state = {
      anchor: 'left',
    };
  
    handleChange = event =&gt; {
      this.setState({
        anchor: event.target.value,
      });
    };
  
    render() {
      const { classes } = this.props;
      const { anchor } = this.state;
  
      const drawer = (
        &lt;Drawer
          type="permanent"
          classes={{
            paper: classes.drawerPaper,
          }}
          anchor={anchor}
        &gt;
          &lt;div className={classes.drawerHeader} /&gt;
          &lt;Divider /&gt;
          &lt;List&gt;{mailFolderListItems}&lt;/List&gt;
          &lt;Divider /&gt;
          &lt;List&gt;{otherMailFolderListItems}&lt;/List&gt;
        &lt;/Drawer&gt;
      );
  
      let before = null;
      let after = null;
  
      if (anchor === 'left') {
        before = drawer;
      } else {
        after = drawer;
      }
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;TextField
            id="permanent-anchor"
            select
            label="Anchor"
            value={anchor}
            onChange={this.handleChange}
            margin="normal"
          &gt;
            &lt;MenuItem value="left"&gt;left&lt;/MenuItem&gt;
            &lt;MenuItem value="right"&gt;right&lt;/MenuItem&gt;
          &lt;/TextField&gt;
          &lt;div className={classes.appFrame}&gt;
            &lt;AppBar className={classNames(classes.appBar, classes[`appBar-${anchor}`])}&gt;
              &lt;Toolbar&gt;
                &lt;Typography type="title" color="inherit" noWrap&gt;
                  Permanent drawer
                &lt;/Typography&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
            {before}
            &lt;main className={classes.content}&gt;
              &lt;Typography type="body1"&gt;
                {'You think water moves fast? You should see ice.'}
              &lt;/Typography&gt;
            &lt;/main&gt;
            {after}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  PermanentDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(PermanentDrawer);
  
  
    [1]: https://material-ui-next.com/demos/drawers/
  </code></pre>