title: How to make div height 100% of his parent?
body: <p>I need to make my four columns classes to 100% height of container height. But I didn't find a example, which works. How should I add css for container and four columns classes to make the children div height the same like father?</p>
  
  <p><a href="https://i.stack.imgur.com/VS77u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VS77u.png" alt=""></a></p>
  
  <pre><code>   &lt;div class="container"&gt;
      &lt;div class="four columns"&gt;
        &lt;h4 class="text-white"&gt;{{$restaurant-&gt;restourant_name}}&lt;/h4&gt;
        &lt;h6 class="text-white"&gt; &lt;b&gt;{{$restaurant-&gt;restourant_address}}&lt;/b&gt;&lt;/h6&gt;
        &lt;h6 class="text-white"&gt;Tel. &lt;b&gt;{{$restaurant-&gt;restaurant_phone}}&lt;/b&gt;&lt;/h6&gt;
        &lt;h6 onclick="openMap();" class="text-green" style="cursor:pointer"&gt;&lt;b&gt;{{ trans('restaurant.map') }}&lt;/b&gt;&lt;/h6&gt;
      &lt;/div&gt;
  
      &lt;div class="four columns" style="display:flex; " &gt;
        &lt;div class="two columns" style="width:100%; height:100%; display:flex; margin: auto; "&gt;
          &lt;div style="width:20%; margin: auto;"&gt;
            &lt;img style="vertical-align:middle" src="img/clockWhite.png"&gt;
          &lt;/div&gt;
          &lt;div style="width:80%;"&gt;
            &lt;div style="height:50%; border-bottom: 4px dotted  "&gt;
           {{ trans('restaurant.work_hours') }}
            &lt;/div&gt;
            &lt;div style="height:50%; white-space:nowrap"&gt;
            @if ($restaurant-&gt;work_start == null )
             &lt;b&gt;{{ trans('restaurant.closed') }}&lt;/b&gt;
            @else
              {{substr($restaurant-&gt;work_start,0,-3)}} - {{substr($restaurant-&gt;work_end,0,-3)}}
            @endif
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="two columns" style="width:100%; height:100%; display:flex; margin: auto; "&gt;
          &lt;div style="width:20%; margin: auto;"&gt;
            &lt;img style="vertical-align:middle" src="img/clockWhite.png"&gt;
          &lt;/div&gt;
          &lt;div style="width:80%;"&gt;
            &lt;div style="height:50%; border-bottom: 4px dotted white;"&gt;
           {{ trans('restaurant.delivery_hours') }}
            &lt;/div&gt;
            &lt;div style="height:50%; white-space:nowrap"&gt;
            @if ($restaurant-&gt;delivery_start == null )
             &lt;b&gt;{{ trans('restaurant.no_delivery') }}&lt;/b&gt;
            @else
              {{substr($restaurant-&gt;delivery_start,0,-3)}} - {{substr($restaurant-&gt;delivery_end,0,-3)}}
            @endif
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
  .container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
  .column,
  .columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }
  </code></pre>