Sticky footer container that doesn't overlap other content - html

Question

I have a sidenav which has a container with social media context that is meant to stick to the bottom of the sidenav which spans the entire view-port height like so:
sidenav {
height: 100%;
background: #007979;
left: 0;
position: fixed;
text-align:
width: 25rem;
}
The sidenav immediate child is a container which has it's position property set to relative to I can then assign a position property and value to the social media container to stick to the bottom, like so:
sidenav-inner {
position: relative;
height: 100%;
}
My issue is that if I set the social media containers position property to either absolute or relative, if the view-port height is adjusted slightly, the social media container overlaps the navigation list that is at the top, as it is positioned in correspondence to the sidenav-inner container.
Question
How do I position the social media container at the bottom of the sidenav, without using the position proeprty? Or how do I use the position property without it overlapping other content in the sidenav?
<nav class="sidenav">
<div class="sidenav-inner">
<div class="sidenav-header">
<div class="row">
<div class="col-md-12">
<img src="/">
</div>
</div>
</div>
<ul class="nav">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<div class="side-nav-social">
<div>
//social media content
</div>
//more social media content
</div>
</div>
</nav>

Answer 1

You can easily solve this by defining .sidenav-inner as a flexbox and then having the header and footer not grow, but the ul grow to take up all the space. It will thus push the social media to the bottom of the box.
.sidenav {
height: 100%;
background: #007979;
left: 0;
position: fixed;
text-align:
width: 25rem;
}
.sidenav-inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.sidenav-header {
flex: 0 1 auto;
}
.sidenav-inner ul {
flex: 1 0 auto;
}
.side-nav-social {
flex: 0 1 auto;
}
https://jsfiddle.net/d2u85u4q/

Answer 2

You can do it like this:(be aware of margins)
html
<nav class="sidenav">
<div class="sidenav-inner">
<div class="sidenav-header">
<div class="row">
<div class="col-md-12">
header
<img src="/">
</div>
</div>
</div>
<ul class="nav sidenav-body">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<div class="side-nav-social">
<div>
//social media content
</div>
//more social media content
</div>
</div>
</nav>
css:
.sidenav {
height: 250px;
background: #007979;
left: 0;
position: fixed;
width: 200px;
}
.sidenav-inner {
position: relative;
height: 90%;
}
.sidenav-header{
height:10%;
}
.sidenav-body{
overflow:auto;
height:70%;
}
.side-nav-social{
position:absolute;
bottom:0;
height:10%;
}
plnker code