我似乎无法溢出："hidden"工作

Question

我试图通过隐藏溢出来禁用超出显示器分辨率的滚动。我不确定为什么它不起作用。

应用程序.js文件：

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

默认视图文件：

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>
        )
    }

现在，没有X滚动，但我可以上下滚动。

该问题的代码沙箱：https://codesandbox.io/s/rylyo4zy24

感谢您的任何帮助！

Answer 1

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

Answer 2

我不确定您在这里要完成什么，但是为了使溢出隐藏具有任何意义，您需要为相应的元素定义一些高度和/或宽度：

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