У дочерних элементов, имеющих проблемы с высотой в свойстве flex box

Question

У меня возникли проблемы с дочерними div гибкими контейнерами, занимающими всю высоту контейнера, в котором они находятся. Я пытался унаследовать высоту и проценты, но он не работает. В идеале я собираюсь использовать этот формат .

Вот код, который у меня есть.

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 70vh;
  background-color: cyan;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  height: inherit;
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 85%;
  flex-direction: column;
  height: inherit;
}

.city-selector {
  display: flex;
  flex: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  flex: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}

<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Любая помощь будет принята с благодарностью!

Answer 1

Используйте Высота height: 25% вместо flex: 25% для city-selector и row-2 селектор flex: 75% до height: 75%. Сделайте height: 100% для html,body and containers.

См. Ниже фрагмент кода.

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  height: 100%;
}

.content-container {
  background-color: cyan;
  height: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 90%;
  flex-direction: column;
}

.city-selector {
  display: flex;
  height: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  height: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}

<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>