css - Unnecessary vertical Scrollbar in Chrome -

using joomla extension jce mediabox, displaying dynamic content in lightbox. have height set auto, works in all, on chrome (and reportedly on safari), getting scrollbar, when container large enough:

live site: http://www.drumcafe.de/team/musiker -> click on 1 of musicians orange name

(i can't copy code on jsfiddle, i'd have include whole plugin)

• height of container set auto / css
• height of parent set extension / js
• pixel height reported chrome identical container , content (both integers)
• there no other elements in container
• the content not placed absolutely or offset, nor there border
• the container set overflow-y: auto;, has more content on smaller screens

where scrollbar come from? (and how rid of it?)

bear in mind need overflow: auto

edit: well, asked relevant code, however, i'm afraid might not on own without working site around it. here is:

html:

<div id="jcemediabox-popup-body" style="display: block; top: 0px; height: 889px; width: 1573px;">     <div id="jcemediabox-popup-container" style="display: block;">         <div id="jcemediabox-popup-loader" style="display: none;"/>         <div id="jcemediabox-popup-content" style="display: block; width: 1573px; height: 889px; opacity: 1;">             <div id="jcemediabox-popup-ajax" style="display: block;"> <!-- scrollbar occurs -->                 <div id="overall">                     <div id="system-message-container">                     </div>                     <div class="item-page" itemscope="" itemtype="http://schema.org/article">                         <meta itemprop="inlanguage" content="de-de">                         <div itemprop="articlebody">                             <div class="ma-box">                                 <img alt="20141012 drum-cafe-nathan-berg 038 foto mario-andreya kopie thumb" src="/images/stories/bilder_musiker/20141012_drum-cafe-nathan-berg_038_foto_mario-andreya%20kopie_thumb.jpg" height="330" width="220"/>                                 <div class="idbox">179</div>                                 <div class="maright">                                     <p class="name">nathan lennart berg</p>                                     <p class="jahrgang">1979</p>                                     <div class="vita">                                         <ul>                                             <li>geb. in minden</li>                                             <li>ab 1999 malinke-percussionausbildung bei verschiedenen lehrern, v.a. famoudou konaté &amp; söhnen</li>                                             <li>2000/01 ausbildung in trad. kuban. percussion auf kuba</li>                                             <li>ab 2004 proben und rhythmusunterricht in trier</li>                                             <li>2006/07 ausbildung zum psycho-sozialen coach</li>                                             <li>2008 auftritte mit der gruppe derubey</li>                                             <li>2009 abschluss des psychologie-studiums (diplom)</li>                                             <li>2009 rhythmusstudien-/inspirationsaufenthalt in guinea</li>                                             <li>2009 umzug und gründung der percussionschool beat-etage in berlin</li>                                             <li>2009 anstellung in der ambulanten jugendhilfe in berlin – rhythmusprojekte mit familien</li>                                             <li>2009/2010 rhythmustrainings mit der bigband güstrow</li>                                             <li>ab 2010 professionelle auftritte mit der band séssépercussion in kooperation mit tänzern</li>                                             <li>seit 2010 durchführung interaktiver trommelevents mit drum cafe deutschland</li>                                         </ul>                                     </div>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div>         </div>         <a id="jcemediabox-popup-next" href="javascript:;" title="weiter" class="jcemediabox-popup-link" style="display: none;"/>         <a id="jcemediabox-popup-prev" href="javascript:;" title="zurück" class="jcemediabox-popup-link" style="display: none;"/>     </div>     <div id="jcemediabox-popup-info-bottom" style="display: block; visibility: visible; z-index: -1; top: 0px;">         <a id="jcemediabox-popup-closelink" href="javascript:;" title="schließen" class="jcemediabox-popup-link" style="display: block;">&nbsp;</a>         <div id="jcemediabox-popup-caption" style="display: block;"/>         <span id="jcemediabox-popup-numbers" style="display: block;"/>     </div> </div> 

css:

#jcemediabox-popup-body {     position: relative;     overflow: visible;     margin: 0 auto;     z-index: 10002;     max-width: 960px; }  #jcemediabox-popup-container {     max-height: 100%;     overflow-y: auto;     overflow-x: hidden; }  #jcemediabox-popup-content{ display:block; height: auto!important; }  /* container */ #jcemediabox-popup-ajax{     display: block;     max-width: 960px;     height: auto!important;     overflow: auto;     border: 0;     padding: 0;     margin: 0;     width: auto; }  /* content div */ #overall{     max-width: 960px; } 

you need override jce mediabox style, problem in #jcemediabox-popup-ajax has overflow auto. if change class in css file to:

#jcemediabox-popup-ajax{ overflow: hidden !important; }