删除不需要的水平滚动（水平滚动来自哪里？）

Question

我注意到我的 react 应用程序有一个不需要的水平滚动。我看到如果我注释掉 <About/> 组件，那么滚动就会消失。不确定为什么要添加它。如果我将overflow-x: hidden 添加到App.css，它就会消失，但这似乎不是正确的解决方案。

另外，我发现 <About/>= BLUE 组件将出现在 RED 部分。我无法理解为什么会这样。

感谢任何帮助。

这些是文件和Screenshot：

App.js

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Landing from "./Components/Landing";
import About from "./Components/About";
function App() {
  return (
    <div className="App">
      <Landing />
      <About />
    </div>
  );
}
export default App;

App.css

.App {
  height: 100vh;
  width: 100vw;
  max-width: 900px;
  padding: 1rem;
  background-color: lightpink;
}

Landing.js

import React from "react";
import "./Landing.css";

function Landing() {
  return (
    <div className="LandingContainer"></div>
}
export default Landing;

Landing.css

.LandingContainer {
  height: 100%;
  width: 100%;
  background-color: lightgreen;
}

关于.js

import React from "react";
import "./About.css";

function About() {
  return (
    <div className="MainAboutContainer"></div>
}
export default About;

About.css

.MainAboutContainer {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  text-align: center;
}

Answer 1

您是否启用了任何其他 css？

如果没有，请尝试在您的 App.css 中添加以下内容：

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  /* this makes sure the padding and the border is included in the box sizing */
  box-sizing: border-box;
  overflow-y: hidden;
}

html body {
  padding: 0;
  margin: 0;
  overflow-y: inherit;
}

此外，您不应将height: 100% 添加到您的Landing 和About 元素中，这会使您的应用的高度加倍。

编辑

试试这个，它会消除水平滚动和奇怪的填充问题：

App.css

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  /* this makes sure the padding and the border is included in the box sizing */
  box-sizing: border-box;
  overflow-y: hidden;
}

html body {
  padding: 0;
  margin: 0;
  overflow-y: inherit;
}

.App {
  height: 100vh;
  width: 100vw;
  max-width: 900px;
  padding: 1rem;
  background-color: lightpink;
}

登陆.css

.LandingContainer {
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}

关于.css

.MainAboutContainer {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  text-align: center;
}

Answer 2

最简单的答案是将 overflow-x:none 放入您的 App.css 中。