Remove unwanted horizontal scroll (Where is the horizontal scroll coming from?)

user_13118318 0
Viewed 5956

I am noticing that my react application has an unwanted horizontal scroll. I see that if I comment out the <About/> component then the scroll disappears. Not sure as to why it is getting added. It goes away if I add overflow-x: hidden to App.css but it doesnt seem like the right solution.

Also, I se that <About/>= BLUE component is coming on the RED part. I am not able to understand why it is happening.

Appreciate any help.

These are the files and theScreenshot:

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

About.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;
}
reactjs frontend user-interface css html
2 Answers

Do you have any other css enabled?

If not, try adding following in your 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;
}

Additionally, you shouldn't add height: 100% to both of your Landing and About element, it will double your app's height.

Edit

Try this, it'll remove the horizontal scroll and weird padding problem:

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

Landing.css

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

About.css

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

the easiest answer is to put overflow-x:none in your App.css .

user_131183180
Related