title: Full height & width without scrollbar in Material UI React app
body: <p>I am trying to render a page for full height. But it adds a scrollbar which is undesirable. With 100% height, I mean just the size of the screen.</p>
  
  <p>Here is the demonstration. The yellow highlighted part is the unwanted height added. There is also a horizontal scrollbar(not highlighted):</p>
  
  <p><a href="https://i.stack.imgur.com/yz07O.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yz07O.png" alt="enter image description here"></a></p>
  
  <p>Here is the render method of the page:</p>
  
  <pre><code>return (
      &lt;&gt;
          &lt;Box display='flex' flex='1' justifyContent='space-around'&gt;
              &lt;IndexSelector
                  id='index'
                  value={symbol}
                  onChange={this.onSymbolChange}/&gt;
              &lt;SeriesSelector
                  id='series'
                  seriesList={Form.seriesList}
                  onChange={this.onSeriesChange}/&gt;
              &lt;DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/&gt;
          &lt;/Box&gt;
  
          &lt;Box height='100%' border='1px solid red' marginTop='50px'&gt;
              &lt;Graph instructions={this.getInstructions()} apiData={this.apiData} /&gt;
          &lt;/Box&gt;
      &lt;/&gt;
  )
  </code></pre>
  
  <p>Here is the index.css:</p>
  
  <pre><code>html {
    box-sizing: border-box;
  }
  
  html, body, #root {
    padding: 0px !important;;
    margin: 0px !important;;
    height: 100vh;
    width: 100vw;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
  }
  </code></pre>
  
  <p>How to avoid this extra height &amp; width and make the red border boxed container full height? </p>
  
  <p><strong>EDIT</strong>:
  As per @gowatham suggestion, I tried and it didn't work. I got the following result:</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>HTML: <a href="https://pastebin.com/Qu2RFHe7" rel="noreferrer">https://pastebin.com/Qu2RFHe7</a>
  CSS: <a href="https://pastebin.com/1z3Zg5rv" rel="noreferrer">https://pastebin.com/1z3Zg5rv</a></p>
  
  <p><a href="https://i.stack.imgur.com/UvBz8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UvBz8.png" alt="enter image description here"></a></p>