Auto heighten divs in Foundation over using media queries? - zurb-foundation

Question

My questions is a common problem i seem to encounter but my brain never registers the right answer for some reason, probably because i'm slow.
The question I have is regarding my navigation menu.
When i'm at full width in Foundation i use the large-12 class and the small-12 class for smaller viewports, however i have that nav div inside of another parent div so when i get to small viewport the navigation drops below the height of the parent div.
I've set the parent div to a min-height: 204px and a max-height: auto assuming that it will adjust in height to wrapping child elements but i doesn't work.
So what is the best way to ensure that child divs that grow in height due to smaller viewports will push the parent div in height as well?
Here is my html:
<div>
<div class="interior-header">
<div>
<nav class="utility">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
<div>
<nav class="main">
<div class="logo small-12 large-offset-1 large-5 columns left"></div>
<ul class="small-12 large-6 columns right">
<li>Home</li>
<li>Catalog</li>
<li>Learn More</li>
<li>Be a Broker</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
and here is the css for this particular component:
// HEADER INTERIOR
.interior-header {
background: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
min-height: 174px;
max-height: auto;
}
// NAVIGATION FIRST TIER
nav.main {
margin-top: 2%;
min-height: 100px;
height: auto;
}
Any help would be awesome, thank you.

Answer 1

.main {overflow: hidden;}
This causes a block-level element to contain its descendants.