Changing "overflow" property on container doesn't change inner element size at runtime?

Question

I have some js code to toggle "overflow" property at runtime and get size information for inner elements which are using "width:100%". See here: jsFiddle Demo URL.

$('#container').css('overflow', 'hidden');
$('#size1').text('Inner element size at runtime: ' + $('#content').width());

What I found is, when "overflow" is changed from "auto" to "hidden" at runtime, IE10 and Firefox would change the inner elements size. But in Chrome, the size wouldn't be changed.

Any idea about how to tell Chrome to update the size of inner element? Thanks.

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

You need to instruct the browser to repaint the element. There is a stackoverflow question with a nice answer here: How can I force WebKit to redraw/repaint to propagate style changes?

$('#container')
    .css('overflow', 'hidden')
    .each(function(){
        this.style.display='none';
        this.offsetHeight; 
        this.style.display='block';
    });

http://jsfiddle.net/XNtjh/

edited May 23 '17 at 12:05

Community

1
1

answered Jun 12 '13 at 01:40

Malk

11,855
4
33
32

score 0 · Answer 2 · answered Jun 12 '13 at 01:12

0

Add box-sizing:border-box to the inner container.

#content {
    border: 1px solid red;
    width: 100%;
    height: 300px;
    box-sizing:border-box;
}

http://jsfiddle.net/gT5PD/

http://www.w3schools.com/CSSref/css3_pr_box-sizing.asp

answered Jun 12 '13 at 01:12

Malk

11,855
4
33
32

Thanks for the answer, but it only works when there is border. [Without border it wouldn't work](http://jsfiddle.net/gT5PD/1/). In the demo is using borders to show you what those divs look like. In the actual case, there may not be any border. – bigbearzhu Jun 12 '13 at 01:22

score 0 · Answer 3 · answered Jun 12 '13 at 01:25

0

It's probably because space is freed-up which was previously occupied by the scrollbars when overflow was set to auto.

answered Jun 12 '13 at 01:25

designcise

4,204
1
17
13

It seems you absolutely understood my question, which is great! Yes the space was from the scrollbars, but now I don't know how to change the size of the inner element automatically when the scrollbars are removed. – bigbearzhu Jun 12 '13 at 01:30
It's the default behavior of the browser. The only possible work-around right now would be to create custom scrollbars using JavaScript perhaps, or you can always look for plugins that do that. – designcise Jun 12 '13 at 01:31

Changing "overflow" property on container doesn't change inner element size at runtime?

3 Answers3