I can't seem to get overflow:"hidden" to work

Question

I am trying to disable scrolling beyond the monitor resolution by hiding overflow. I am not sure why it is not working.

App.js file:

function App() {
  return (
    <BrowserRouter>
    <div className="App"
    style={{
      overflow:"hidden"
      }}
    >
    <Route
        exact
        path="/"
        component={DefaultView}

    ></Route>
    </div>
    </BrowserRouter>
  );
}

Default View File:

render(){
        return(
            <div
                style={{
                    overflow:"hidden"
                }}>
                <div
                    className="bg"
                    style={{
                        backgroundColor:"#FFFFF",
                        position:"absolute",
                        width:"100%",
                        height:"100%"
                        }}
                />
                <div 
                    className="line"
                    style={{
                        backgroundColor:"#289BD3",
                        position:"absolute",
                        height:"1000px",
                        width:"1920px",
                        transform:"rotate(45deg)",
                        top:"200px",
                        left:"-800px"
                    }}
                >
                </div>
            </div>
        )
    }

Right now, there is no X scrolling, but I can scroll up and down.

A codesandbox of the issue: https://codesandbox.io/s/rylyo4zy24

Thanks for any help!

Answer 1

I'm not sure exactly what you're trying to accomplish here, but for overflow hidden to have any meaning you need to define some height and/or width for the respective element:

<div
  style={{
    overflow:"hidden",
    height:"1000px",
    width:"1920px"
  }}
>
...

Answer 2

我将父 div 的位置更改为绝对位置，将子 div 的位置更改为相对位置，从而解决了问题。