How these flex item will occupy the 100% height of the container..

See more:

CSS

HTML

Flex

bootstrap

I want these flex items to occupy the full space of this container..
Want the user_links section occupy the rest of the height...

What I have tried:

I tried flex property min height,height etc.. Nothing happened..





Here, the code written in bootstrap


<header class="section-header">
<div class="row no-gutters">
<div class="col-md-4 ">
<img src="img/person1.jpg" alt="perosn" class="img-fluid img--extra">
</div>
<div class="col-md-8 bg-danger">
<div class="info">
<div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">
<h1>Ubaid Rather</h1>

<i class="fab fa-twitter"></i>

<i class="fab fa-facebook"></i>

<i class="fab fa-instagram"></i>

<i class="fab fa-linkedin"></i>

<i class="fab fa-github"></i>
</div>
<div class="user_proffession">
<h4 class="ml-4">Front End developer</h4>
</div>
<sectionclass="user_links" >
<div class="d-flex align-content-strech text-center justify-content-around" >

<div class="portfolio-item bg-primary" style="flex: 1;">
<i class="fas fa-home fa-2x"></i>
<h2>Home</h2>
</div>

<div class="portfolio-item bg-success" style="flex: 1;">
<i class="fas fa-graduation-cap fa-2x"></i>
<h2>Resume</h2>
</div>


<div class="portfolio-item bg-warning" style="flex: 1;">
<i class="fas fa-folder-open fa-2x"></i>
<h2>file</h2>
</div>


<div class="portfolio-item bg-info" style="flex: 1;">
<i class="fas fa-envelope fa-2x"></i>
<h2>Contact</h2>
</div>

</div>

</div>
</div>
</div>
</section>
</header>