How to get rid of unnecessary scrollbars

Question

I have two divs one inside the other.

Both are explicitly set to the same height.

However the outer div has a max-width/height constraint and overflow auto.

This works as I want and the scrollbars come on when the divs are resized and the inner content dims exceed the outer divs.

Problem is that from that point reducing the size of both divs won't turn off the scrollbars.

Effectively one scrollbar is keeping the other scrollbar on.

The only work around so far has been to momentarily reduce the size of the inner div to 20px less than the outer div and then resetting it back to the matching dimensions.

Does anyone know of a solution that will stop the scrollbars staying 'on' when both inner and outer divs are the same size?

TIA Rob

demo hereJSFiddle

Answer 1

This seems to be a problem when things are changed via script and the browser doesn't update the scrollbar position.

The trick here is to force a reflow by changing the overflow to auto again once your operations complete, and because it happens blazingly fast, to be able to get the browser recompute the need for scrollbars, you need to delay it a bit.

For example:

window.clickit = function (mode){
    switch(mode){
        case 1:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

Demo Fiddle: http://jsfiddle.net/abhitalks/f9c8orf7/1/

Demo Snippet:

window.clickit = function (mode){
    switch(mode){
        case 1:
            outer.style.height='250px';
            outer.style.width='250px';
            inner.style.height='250px';
            inner.style.width='250px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            outer.style.height='100px';
            outer.style.width='100px';
            inner.style.height='100px';
            inner.style.width='100px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            outer.style.height='150px';
            outer.style.width='150px';
            inner.style.height='150px';
            inner.style.width='150px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

#outer{
    height: 150px; width: 150px;
    max-width:200px; max-height:200px;
    overflow:auto;
}
#inner {
    background-image: url('//lorempixel.com/200/200');
}

<div id="outer" style="height:150px;width:150px">
    <div id="inner" style="height:150px;width:150px"></div>
</div>
<button onclick="clickit(1);">bigger</button>
<button onclick="clickit(2);">smaller</button>
<button onclick="clickit(3);">reset</button>

Answer 2

Change your CSS to:

#outer{
max-width:200px;
max-height:200px;
background-color:red;
overflow:hidden;

}