scroll bar missing in react web app

Question

i made an interface using react but when i add more items to the screen and the screen gets full the scroll down bar doesn't appear and i can't see the elements that are at the end of the page. thank you for your time i really appreciate it.

this css is written in a single folder it is ment to the css for all my pages i don't know if this could make this problem

css code :

.App-header {
  position: fixed;
  display: block;
  width: 100%;
  background-color: #222;
  color: #FFFF;
  height:90px;
  position: fixed;
}
.App-header ul li{
  float:left;
  padding-top:25px;
  padding-left: 10px;
  padding-bottom: auto;
}
.App-header ul li h1{
display:inline;
padding-left: 8px;
padding-right: 8px;
}
.App-header ul li{
display:inline;
}
.App-header ul li a{
text-decoration:none;
font-size:15px;
font-weight:bold;
color:white;
}
.App-header ul li a:hover{
text-decoration:underline;
text-decoration-color: red;
}

.Body{
  position:absolute;
  margin-top: 90px;
  width:100%;
}
.Body h1 {
  color: black;
}
.Body p{
  color:black;
}
.Newfeeds {
  float:right;
  border: solid red;
  margin-right:10px;
  width:200px;
}
.Newfeeds h1{
  font-size: 20px;
  text-decoration:underline;
}
.weather{
  border: solid green;
  float:left;
  height:400px;
  width:400px;
  margin-left:15px;
}

this is the react code that , used to make my interface i have another page called index the only code in there is to create pathes between pages it is also has the header .

home page code :

import React, {Component} from 'react';
import '../Css/App.css';
class HomePage extends Component {
  render(){
    return(
      <div className="Body">
        <div className="Newfeeds">
          <h1>Your daily information</h1>
<p>A Kangaroo cannot walk backwards.

The San Francisco cable cars are the only mobile National Monuments.

The only 15 letter word that can be spelled without repeating a letter is uncopyrightable.

Non - dairy creamer is flammable

A duck's quack doesn't echo and no one knows why.
Although, the show Brianiac has proved that it does in fact does echo.

In the Wizard of Oz Dorothy's last name is
Gail. It is shown on the mail box.</p>
</div>
      <div className="weather">

      </div>
    </div>
    );
  }
}
export default HomePage;

thank you for your time i hope i described my problem in a good way :)

Answer 1

I do not have the exact answer but what would i do is, i would go and delete one after the other css property or maybe even a whole block of css properties on specific class until i find which line causes the problem

do you have this code on github so i can download it and see if i can solve the problem for you?