html - How can i include all child divs into a parent div? -

why parent div not wrapping content or child divs?

i need flex-item(child elements) inside flex-container div.

here codepen.

body {      background:#ddd;  }  .flex-containerhome {      height:600px;      display:table;      white-space:nowrap;  }  .flex-cotainerhead {      display:inline-block;      margin:0 auto;  }  .flex-container {      padding: 10px;      display: flex;      flex-flow: column wrap;      border:1px solid #fff;      height:600px;  }  .flex-item:hover {      background-color: #191975;  }  .flex-item {      transition:background .5s;      background: tomato;      width: 150px;      height: 150px;      margin: 10px;      line-height: 150px;      color: white;      font-weight: bold;      font-size: 1em;      text-align: center;      border-radius:15px;  }

<div class="flex-containerhome">      <div class="flex-cotainerhead">          <div class="flex-container">              <div class="flex-item">1</div>              <div class="flex-item">2</div>              <div class="flex-item">3</div>              <div class="flex-item">4</div>              <div class="flex-item">5</div>              <div class="flex-item">6</div>              <div class="flex-item">7</div>              <div class="flex-item">8</div>          </div>      </div>       <div class="flex-cotainerhead">          <div class="flex-container">              <div class="flex-item">1</div>              <div class="flex-item">2</div>              <div class="flex-item">3</div>              <div class="flex-item">4</div>              <div class="flex-item">5</div>              <div class="flex-item">6</div>              <div class="flex-item">7</div>              <div class="flex-item">8</div>          </div>      </div>  </div>

i gave shot, here's my fork.

i modified .flex-containerhome behave flex well. added flex: 1 0 auto .flex-container element. removed .flex-cotainerhead elements

modified html

<div class="flex-containerhome">   <div class="flex-container">     <div class="flex-item">1</div>     <div class="flex-item">2</div>     <div class="flex-item">3</div>     <div class="flex-item">4</div>     <div class="flex-item">5</div>     <div class="flex-item">6</div>     <div class="flex-item">7</div>     <div class="flex-item">8</div>   </div>   <div class="flex-container">     <div class="flex-item">1</div>     <div class="flex-item">2</div>     <div class="flex-item">3</div>     <div class="flex-item">4</div>     <div class="flex-item">5</div>     <div class="flex-item">6</div>     <div class="flex-item">7</div>     <div class="flex-item">8</div>   </div> </div> 

modified css

.flex-containerhome {   height: 600px;   display: flex; } .flex-container {   padding: 10px;   display: flex;   flex-flow: column wrap;   flex: 1 0 auto;   border: 1px solid #fff;   height: 600px; }