Overflow auto breaking float in IE until window resize

Question

Context: I have a floated set of navs as part of a web app. Multiple navs sit next to each other, within a container which is sitting between a sidebar and the content. Floats are used to achieve this. The navs inside the nav container use overflow:auto and height:calc(100vh) so that they are always full height and become scrollable if content tries to escape below 'the fold'.

Works in: Firefox, Chrome

Breaks in: IE11, IE10, IE9 (not supporting IE <= 8)

Problem: If the page loads without the scrollbar on the first nav, then all is fine, but if a scrollbar is needed the float breaks and the second nav falls underneath, but only until the window is resized. Strangely the browser does, however, block elements from filling the space where the stacked nav should be.

My setup has been simplified in this jsFiddle. Try resizing the viewport of the output and refreshing to see the different behaviour mentioned above.

The IE problem, before and after resizing

I should note that the navs are of dynamic width as the contents are dynamic and could vary in width. I would also like to avoid using JavaScript to control visuals so a pure CSS/HTMl markup solution is what I'm really after here.

Brewal · Accepted Answer · 2015-01-28T10:48:28.097

1

Looks like another bug in IE. You might fix this by setting the width of your .nav elements, or if you want to leave it auto, you will have to use javascript :

<!--[if IE]>
<script type="text/javascript">
window.onload = function() {
    var navs = document.getElementsByClassName('nav');
    [].forEach.call(navs, function(el) {
        el.style.width = "125px"; // or whatever...
        setTimeout(0, function(){el.style.width = "auto";});
    });
}
</script>
<![endif]-->

demo

Another solution would be to change the css for your #nav-container element. You could try leaving its default behaviour. It will work as expected, as long as everything inside it is floated left :

demo

edited Jan 28 '15 at 10:48

answered Jan 28 '15 at 10:29

Brewal

8,067
2
24
37

Hi, yeah setting a width sorts it out but I should have mentioned that the content of the navs is dynamic and as such we want the widths to be as well. I have thought of a JS workaround other than the width, but would like to avoid using JS to control visuals if possible. – MDEV Jan 28 '15 at 10:39
Awesome! Who knew the solution would be so simple... Thanks! `Edit: the fix was removing the styles on the container.` – MDEV Jan 28 '15 at 11:01

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

check out the below css line instead of the height which u had mention in ur css

 height: -moz-calc(100vh - 40px);
        height: -webkit-calc(100vh - 40px);
        height: calc(100vh - 40px);

reference link

edited May 23 '17 at 12:12

Community

1
1

answered Jan 28 '15 at 09:58

vas

962
1
9
21

Thanks for the reply, but the height isn't an issue. They're being set to the correct height, but the second nav stacks instead of floating if the first nav has a scrollbar. The issue then being fixed when resizing the window. Did you check out the jsFiddle? – MDEV Jan 28 '15 at 10:01

Overflow auto breaking float in IE until window resize

2 Answers2