Setting 100% on a child of body overflows the page

Question

This is the css

body, html {
    height: 100%;
    width: 100%;
}
#container {
    display: flex;
    position: absolute;
    flex-flow: column wrap;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: black;
}

div.sections {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: stretch;
  margin: 0;
  padding: 0;
  width: 100%;
  color: black;
  background-image: linear-gradient(0, orange, gold);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

where #container is a sibling of div.sections , both directly under the body tag. The problem is #container 's height overflows the body by div.sections 's height. I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript, but I'd really like to see the solution in css.

Answer 1

I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks

div.sections {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 500px; /* Height Value as you want */
  width: 100%;
  color: black;
  background-image: linear-gradient(0, orange, gold);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}