Overflow property not working in IE 11

Question

My code below works fine in most browsers (Chrome, Firefox, Safari, Edge) but does not seem to work in IE11.

I'm reading about the Known Issues at caniuse but it doesn't seem to say anything about IE11 and overflow. Is this a bug in IE 11 or am I missing something?

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}
.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 auto;
  overflow: auto;
}

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>

Michael Benjamin · Accepted Answer · 2016-05-19T15:33:56.547

As you noted, IE11 has many problems rendering flexbox. The fact that you haven't found documentation about this particular issue could just mean it hasn't been documented yet. But it does appear to be a bug.

In terms of the overflow property, IE11 will apply overflow: visible, regardless of the actual value, unless a width or height is declared.

In your case, simply switching from flex-basis: auto to flex-basis: 75px (just an example), fixes the scrollbar issue.

As a fixed height is not what you're looking for, you could try targeting styles for just IE11.

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}
.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 75px;             /* adjusted */
  overflow: auto;
}

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container,
                      even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>

Overflow property not working in IE 11

1 Answers1

Linked