Unnecessary vertical Scrollbar in Chrome

Question

Using the Joomla extension JCE Mediabox, I am displaying dynamic content in a lightbox. I have the height set to auto, which works all in all, but on Chrome (and reportedly on Safari), I am getting a scrollbar, even when the container is large enough:

Live site: http://www.drumcafe.de/team/musiker -> Click on one of the musicians with orange name

(I can't simply copy code over to JsFiddle, I'd have to include the whole plugin)

• Height of the container is set to auto / CSS
• Height of the parent is set by the extension / JS
• Pixel height as reported by Chrome is identical for container and content (both integers)
• There are no other elements in the container
• The content is not placed absolutely or with an offset, nor is there a border
• The container is set to overflow-y: auto;, as it has to be for more content on smaller screens

Where does the scrollbar come from? (And how do I get rid of it?)

Bear in mind I need the overflow: auto

EDIT: Well, you asked for relevant code, however, I'm afraid it might not do much good on its own without the working site around it. Here it 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;"> <!-- this is where the 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;
}

/* This is the container */
#jcemediabox-popup-ajax{
    display: block;
    max-width: 960px;
    height: auto!important;
    overflow: auto;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
}

/* This is the content div */
#overall{
    max-width: 960px;
}

Answer 1

You will need to override JCE Mediabox style, the problem is in #jcemediabox-popup-ajax has overflow auto. If you change this class in your css file to:

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