title: Can't remove scrollbar from Material UI Dialog
body: <p>I have a modal window with a keyboard in it. Everything's fine, except that I can't remove the scrollbar. I tried adding <code>overflow:'hidden'</code> as inline css but still nothing. </p>
  
  <p>Also, even when using <code>container-full padding-0</code> in bootstrap, the components still won't go till the edge of the screen. So I guess here's the problem.</p>
  
  <p>This is where I render my component</p>
  
  <pre><code>&lt;div className="container-full padding-0"&gt;
      &lt;div className="row"&gt;
          &lt;div className="col-sm-3"&gt;
              &lt;ButtonsGrid list={this.state.list} clicked={this.clicked}/&gt;
          &lt;/div&gt;
          &lt;div className="col-sm-3" style={{paddingLeft:0, paddingRight:0}}&gt;
              &lt;ButtonsGrid list = {this.state.list} clicked={this.clicked}/&gt;
          &lt;/div&gt;
          &lt;div className="col-sm-6" style={{paddingRight: 0, paddingLeft: 0}}&gt;
             &lt;Keyboard search={this.search}/&gt;  &lt;-------------- HERE
          &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And the component's <code>render</code> looks like this:</p>
  
  <pre><code>render() {
      return(
          &lt;div&gt;
              &lt;Paper 
               onClick={this.toggleKeyboard}&gt;
                  &lt;p 
                   style={{
                     fontSize:40, 
                     overflow:'hidden'}}&gt;
                     {this.state.input !== '' ? 
                       this.state.input : 'Search...'}
                  &lt;/p&gt;
              &lt;/Paper&gt;
              &lt;br /&gt;
  
              {this.state.showKeyboard ? 
                &lt;Dialog 
                 open={this.state.showKeyboard} 
                 maxWidth='md'fullWidth&gt;
                  &lt;GridList 
                   cellHeight={50} 
                   cols={11} 
                   style={{overflowX:'hidden'}}&gt;
                      {this.state.keyboard.length &gt; 0 ? 
                       this.state.keyboard.map(key =&gt; {
                        return(
                          &lt;Button 
                            disabled={key.value === ''} 
                            key={Math.random()*13} 
                            style={{minWidth: '30px', border: '1px solid'}} 
                            color="default" 
                            onClick={key.value !== 'Enter' ? 
                             () =&gt; this.onInputChanged(key.value) : 
                             () =&gt; this.search(key.value)}&gt;
                              &lt;div 
                               style={{fontSize:'15px', 
                                       display: 'flex', 
                                       justifyContent: 'center', 
                                       textAlign:'center'}}
                               &gt;
                                  {key.value}
                              &lt;/div&gt;
                          &lt;/Button&gt;
                          )
                      }):null}
                  &lt;/GridList&gt;
                &lt;/Dialog&gt;:''}
  
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>Also, <a href="https://imgur.com/a/hvD0l" rel="noreferrer">here's</a> a visual.</p>
  
  <p>If I inspect the element in the browser, I can just uncheck overflow and it <a href="https://imgur.com/a/O1bY3" rel="noreferrer">removes</a> it. </p>
  
  <p>I tried adding <code>overflow:'hidden'</code> to the <code>div</code> where the component gets rendered but it still wouldn't work.</p>
  
  <p>Any ideas?</p>