Footer hides content of the div above it

Solution 1:

The main problem is using the position property in the wrong place. the position property is good especially when you're considering boxes.

in your styles.css

.App {
  font-family: sans-serif;
  height: 100%;
  position: relative;
}
.footer {
  position: absolute;
  min-height: 2rem;
  width: 100%;
  text-align: center;
  bottom: 0;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

change it into

.App {
  font-family: sans-serif;
  min-height: 100vh;
}
.footer {
  min-height: 2vh;
  width: 100%;
  text-align: center;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 90vh;
}

Explanation: The main idea is that for keeping the footer always have to split the viewport into separate ratios. So that they can always stay with that ratio irrespective of the content. here the div with className App have a min-height of 100vh, which means when we split the viewport into 100 pieces div with App occupies a minimum of 100 slices. Now inside App, we have the flex and footer. We give flex a minimum of 90 pieces and a footer of a minimum of 2. so the footer will always keep in the bottom now.

here is the updated result