Overflow-Y Scroll Not Working in Ie 11

overflow-y scroll not working in IE 11

It's a bug.

See https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx

You can use

-ms-overflow-style:scrollbar;

Overflow property not working in IE 11

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>

Vertical scroll bars in IE 10 11

Due to a few conflicting rules you have two overlapping scrollbars (one for html, and the other for the body element) preventing the user from click-dragging on the one that matters most. The quick solution is to simply remove the overflow-y property from your index file, line 25:

This behavior is a bit buggy though, and as a result I will be filing an issue on it internally and having our team take a look.

scrollbar in IE is working but not in chrome

Neither of those attributes on the body element are supported in anything other than Internet Explorer. In fact, the Mozilla Developer Network website doesn't list it as an attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

I would recommend doing it in css instead using overflow, overflow-x or overflow-y

Flexbox overflow-y: scroll not working in IE,Edge and Firefox

Never mind. I found a solution here. Seems like it is a bug in Flexbox itself.

Using flexbox with overflow:auto is not working in IE11

EDIT

This answer now stops content to always have 150px height.

• Add: max-height: 150px to .content
• Keep: overflow: auto; on .content

https://codepen.io/anon/pen/zzwmgX

.main {

    display: flex;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    background-color: gray;

    flex-direction: column;

}

.top, .bottom

{

    color: white;

    background: blue;

}

.content {

    overflow-y: auto;

    max-height: 150px;

}

CSS: Scrolling divs in a flexbox broken on IE11?

Not sure if this is the best way, but I simplified this down to a simple bootstrap row, 2 columns.

I set the container to 75vh, and the 2 columns to the same 75vh.

The key was to set the 2 scrolling divs to flex-basis: something rem:

  .search-results {
    overflow-y: scroll;
    margin-bottom: 10px;
    flex-basis: 10rem;
    background-color: #c4decf;
  }

  .accordions {
    overflow-y: scroll;
    overflow-x: hidden;
    flex-basis: 40rem;
    flex-grow: 1;
    background-color: #f0f0f0;
    padding: 10px;
  }

See updated codepen: http://codepen.io/smlombardi/pen/WwLgyV?editors=1100

---

Related Topics