Height=100%/height=100vh выходит за пределы экрана

/* made the body 100vh tall with no margins so no overflow bars will appear on the body */
body {
  margin:0;
  height: 100vh;
  
  /*make children flex items so we can use flex-grow and flex-shrink to control their size */
  display: flex;
  flex-direction:column;
}

body > div  {
  /* make the div elements (i.e. not the footer which is a <footer> element) grow to fit the available space */
  flex-grow:1;
}

p {
  /* removed the display: block from these. not really needed */
  background: #eee;
  height: 100%;
}

#two {
  overflow-y: scroll;
}

.nimbusfooter {
  color: white;
  background: black;
  padding: 5px;
  font-size: 10pt;
  line-height: 23.5px;
  flex-grow:0;
  flex-shrink:1;
}

.footernav, .footernav1 {
  color: inherit; /* changed this from white to inherit, so always adopts parent value */
  text-decoration: underline;
}

<div id = "one" style = "height:50px">
  <p>100% Height</p>
</div>
<div id = "two" style = "height:50px">
  <p>100vh Height</p>
</div>

<footer class = "nimbusfooter">
  <span>&copy; <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span>
  <span style = "float:right;">
    <a class = "footernav">{{'ACCESSIBILITY' | translate}}</a>&nbsp;&nbsp;&nbsp;
    <a class = "footernav1">{{'PRIVACY_AND_LEGAL' | translate}}</a>&nbsp;&nbsp;&nbsp;
    <a class = "footernav">{{'SITEMAP' | translate}}</a>
  </span>
</footer>