jquery - How to stop children from clipping when using dynamic height parents? -

i made panel box this:

html

<section class="panel">     <div class="title">hot</div>      <div class="content">         <a href="">article</a>         <a href="">article</a>         <a href="">article</a>         <a href="">article</a>         <a href="">article</a>         <a href="">article</a>     </div> </section> 

css

#body #rightpanel .panel {     width: 220px;     height: calc((100% - 160px) / 2);      overflow: hidden; }  #body #rightpanel .panel .content {     width: calc(100% - 2px);     height: calc(100% - 34px); }  #body #rightpanel .panel .content {     width: 100%;     height: 27px;     display: block; } 

the panel has dynamic size according viewport size , works pretty how want to. if @ image below notice obvious problem: last element clipped.

how can display child element only if can displayed in full? sort of all-or-nothing children?

i love pure css solution don't mind using js/jquery.

edit

should stumble here , answer: adam's answer works ended cropping 1 more element needed. simplified code into:

function resizepanelarticles() {     var panelheight = $(".content").height();     $("a").show().each(function() {         if ($(this).position().top > panelheight) {             $(this).hide();         }     }); } 

the way can think of doing without javascript changing height: calc((100% - 160px) / 2); min-height: calc((100% - 160px) / 2);. isn't want make enough room rest of them instead of cut them off, it's css way think of.

this can done javascript though. iterate through each a element , position of bottom of element $(this).position().top + $(this).outerheight() , check against container. on window loading , window resizing, because it's dynamic height change, meaning if window resized have recalculated.

function resize(){     var c = $('.panel .content').innerheight();     $('.panel .content a').show().each(function(){         if($(this).position().top + $(this).outerheight() > c){             $(this).hide();         }     }); }  $(window).on('load resize', resize); 

demo