Установка 100% для ребенка тела переполняет страницу

Question

Это 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;
}

, где #container - это брат div.sections, оба непосредственно под тегом body. Проблема в том, что высота #container переполняет тело на высоту div.sections. Я понятия не имею, в чем здесь проблема, и связана ли она с гибкостью. Я знаю, как решить ее с помощью javascript, но мне бы очень хотелось увидеть решение в css.

Answer 1

Я попытался указать значение c для вашего родителя div.sections, например height: 500px;, и это решит вашу проблему. Спасибо

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