How to make div height 100% of his parent?
<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>