title: I can't seem to get overflow:"hidden" to work
body: <p>I am trying to disable scrolling beyond the monitor resolution by hiding overflow. I am not sure why it is not working.</p>
  
  <p>App.js file:</p>
  
  <pre><code>function App() {
    return (
      &lt;BrowserRouter&gt;
      &lt;div className="App"
      style={{
        overflow:"hidden"
        }}
      &gt;
      &lt;Route
          exact
          path="/"
          component={DefaultView}
  
      &gt;&lt;/Route&gt;
      &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  
  <p>Default View File:</p>
  
  <pre><code>render(){
          return(
              &lt;div
                  style={{
                      overflow:"hidden"
                  }}&gt;
                  &lt;div
                      className="bg"
                      style={{
                          backgroundColor:"#FFFFF",
                          position:"absolute",
                          width:"100%",
                          height:"100%"
                          }}
                  /&gt;
                  &lt;div 
                      className="line"
                      style={{
                          backgroundColor:"#289BD3",
                          position:"absolute",
                          height:"1000px",
                          width:"1920px",
                          transform:"rotate(45deg)",
                          top:"200px",
                          left:"-800px"
                      }}
                  &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>Right now, there is no X scrolling, but I can scroll up and down. </p>
  
  <p>A codesandbox of the issue:
  <a href="https://codesandbox.io/s/rylyo4zy24" rel="nofollow noreferrer">https://codesandbox.io/s/rylyo4zy24</a> </p>
  
  <p>Thanks for any help!</p>