0

I am facing issue for the below scenario:

When i set max-height and overflow for IE8 the horizontal scroll bar takes the height of max-height even though the content is not more than the max height.

Eg: If you test the below link in chrome you can see that it works fine JSbin

If you test the same code in ie8 it wont work, for IE8 jsbin wont work so you will need to have it in .html file

CSS

.container {
  overflow:auto;
  max-width:200px;
  max-height:200px;
  border:1px solid red;
}

.content {
  width:300px;
  height:100px;
  border:1px solid blue;
}

HTML

<div class="container">
  <div class="content"></div>
</div>

I was wondering if this could be a duplicate since there were so many posts on ie8 issue with overflow but i couldnt find any that matched my scenario.

In chrome: enter image description here

In IE8: enter image description here

wallop
  • 2,510
  • 1
  • 22
  • 39
  • Can you add a image of rigth and wrong visualization of this code? – xzegga Feb 24 '16 at 20:14
  • oh yeah, thanks for reminding me, i wanted to but forgot – wallop Feb 24 '16 at 20:24
  • 1
    This seems to be the same issue answered [here](http://stackoverflow.com/questions/7707/ie8-overflowauto-with-max-height). Apparently it's an IE8 bug that's never going to be fixed, so the best bet is probably this: ```.container { overflow: auto; max-width:200px; max-height:200px; max-height: none\9; border:1px solid red; }``` – jameson Feb 24 '16 at 21:17
  • the scenario is not the same, there it is about acting as if overflow:hidden, – wallop Feb 24 '16 at 21:24
  • update: trying what jameson mentioned did not solve the issue – wallop Feb 25 '16 at 23:50

0 Answers0