1

I have a container with a max-height. I'd like to place in it a header and a scrolling body. It's simple in most browsers, but I'm struggling with IE11. Using max-height: inherit;, the .scroll div and its scrollbar extends below its parent (see snippet in IE11)

It's trivial using flexbox instead, but IE11 has a bug that requires changing the display of body to resolve. But I can't do that.

Is there some way to get .scroll to scroll correctly in IE11 without flexbox, and while respecting the max-height functionality on the container?

div {
  border: 1px solid #DDD;
}
.container {
  max-height: 150px;
  overflow: hidden;
}
.header {
  height: 40px;
}
.scroll {
  max-height: inherit;
  overflow: auto;
}
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="scroll">
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
    </div>
  </div>
Community
  • 1
  • 1
adamdport
  • 11,687
  • 14
  • 69
  • 91

4 Answers4

0

Edited

You can place your header absolutely and add padding-top to container. But the height of the container will be 40px bigger.

div {
  border: 1px solid #ddd;
}
.container {
  position: relative;
  max-height: 150px; 
  overflow: hidden;
  padding-top: 40px;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: white;
  
}
.scroll {
  max-height: inherit;
  overflow: auto;
}
<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll-first</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll-last</div>
  </div>
</div>
3rdthemagical
  • 5,271
  • 18
  • 36
  • Unfortunately, the `max-height` of the container is from a 3rd party framework and changes based on the circumstances; I cannot change it. – adamdport Jul 25 '16 at 12:42
0

It not seems to be a specific problem of IE, I see the same problem on Chrome too. Your container's height is 150px (since it's from 3-rd party framework we cannot change this number), so the 'scroll' element's height should be 150px - 40px = 110px. Let's set it instead of 'inherit':

div {
  border: 1px solid #DDD;
}
.container {
  max-height: 150px;
  overflow: hidden;
}
.header {
  height: 40px;
}
.scroll {
  max-height: 110px;
  overflow: auto;
}
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="scroll">
      <div>scroll first</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll last</div>
    </div>
  </div>

and everything works fine (I've tested it on both IE and Chrome)

Alexander Dayan
  • 2,846
  • 1
  • 17
  • 30
  • Max-height changes based on the circumstances. – 3rdthemagical Jul 25 '16 at 13:44
  • Anyway it should be or a number or some calculation, correct? So it's still possible to use the same number / calculation minus height of the header. – Alexander Dayan Jul 25 '16 at 13:47
  • 1
    We don't know from what height depends. So in one case it may be 150px, in other - 200 and so on. I think it's not good idea to hardcode max-height of scroll element. – 3rdthemagical Jul 25 '16 at 13:51
  • You're right, it might be not very good idea, but in the question it is hard-coded so I give the specific answer accordingly. Your solution is interesting, but the problem is that you actually enlarge the total height of the container element to 190px :( – Alexander Dayan Jul 25 '16 at 13:59
0

I had exactly the same issue, but after some searching I found that you could add the following styles to your container:

display: flex; flex-direction: column;

And change the max-height style to height.

This seems to work in IE11 as well as all other major browsers, and I didn't have to edit the body at all. Please see this JSFiddle for an example using the code you provided.

I hope this helps!

Leonie
  • 11
  • 1
  • In your example, the scroll container has blown beyond the bottom of the container. You can't see the last element or the down arrow on the scroll bar. – adamdport Jun 05 '17 at 13:26
  • @adamdport Apologies, this only happens in IE11 with the example code you gave in your original post. I have used this fix in my own application and it works in IE11 no problem. I've removed the overflow style you had on your container and it now works in IE11 no problem, I've updated the JSFiddle above. – Leonie Jun 06 '17 at 08:48
  • the `.scroll` container is still extending beyond the container. I made the container border red so you can see it better: https://jsfiddle.net/6aevqoLw/2/. Also, the question explicitly says "without flexbox", sorry. – adamdport Jun 06 '17 at 13:01
  • @adamdport I have added the overflow style back in, with your red box to display it. If you change the container `max-height` to `height` it works, as shown here http://jsfiddle.net/6aevqoLw/3/ – Leonie Jun 07 '17 at 08:10
  • The question asks "while respecting max-height inherit". Thanks anyway. – adamdport Jun 07 '17 at 13:16
  • @adamdport What you're asking to do sits outside the W3C Standards as using max-height does not explicitly set the height of the div, of which there is a detailed explanation here https://stackoverflow.com/a/16472772. You could use `height: calc(max-height)` but this is not supported in IE. – Leonie Jun 07 '17 at 14:55
-1

Hope it'll help ;)

div {
  border: 1px solid #DDD;
}
.container {
  max-height: 150px;
  height: 150px;
  overflow: hidden;
  position: relative;
}
.header {
  height: 40px;
}
.scroll {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
}
<div class="container">
    <div class="header">
      header
    </div>
    <div class="scroll">
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
      <div>scroll</div>
    </div>
  </div>
makonnen dos santos
  • 348
  • 1
  • 7