Child divs having issues with height in flex box property

Question

I have been having issues with the child divs of flex containers taking up the full height of the container they are in. I have tried inheriting height and percentages and it is not working. Ideally, I am going for this format.

Here is the code I have so far.

* {
  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>

Any help will be greatly appreciated!

your question is not clear for understanding, what issue you are facing. try elaborating more — Anant Vikram Singh, Mar 18 '20 at 03:45

bala.tamizh · Accepted Answer · 2020-03-18T09:18:07.200

Use Height height: 25% instead offlex: 25% for city-selector and row-2 selector flex: 75% to height: 75%. Make height: 100% for html,body and containers.

Refer Below Code Snippet.

* {
  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>

Child divs having issues with height in flex box property

1 Answers1