Auto heighten divs in Foundation over using media queries? -

my questions common problem seem encounter brain never registers right answer reason, because i'm slow.

the question have regarding navigation menu.

when i'm @ full width in foundation use large-12 class , small-12 class smaller viewports, have nav div inside of parent div when small viewport navigation drops below height of parent div.

i've set parent div min-height: 204px , max-height: auto assuming adjust in height wrapping child elements doesn't work.

so best way ensure child divs grow in height due smaller viewports push parent div in height well?

here html:

<div>       <div class="interior-header">         <div>           <nav class="utility">             <ul>               <li><a href="#" class="register">register</a></li>               <li><a href="#" class="login">login</a></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><a href="#">home</a></li>               <li><a href="#">catalog</a></li>               <li><a href="#">learn more</a></li>               <li><a href="#">be broker</a></li>               <li><a href="#">contact</a></li>             </ul>           </nav>         </div>        </div>     </div> 

and here css 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 awesome, thank you.

.main {overflow: hidden;} 

this causes block-level element contain descendants.