position:sticky and display:flex doesn't work on IE 11

Trying to make the position: sticky and display: flex to work on Internet Explorer 11.

It works great on Chrome, Firefox and Edge. But surprise surprise it doesn't work on Internet Explorer 11.

<div class="flexbox-wrapper">
  <div class="regular">
     This is the regular box
  </div>
  <div class="sticky">
     This is the sticky box
  </div>
</div>
.flexbox-wrapper {
  display: flex;
  height: 200px;
  overflow: auto;
}
.regular {
  background-color: blue;
  height: 600px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

JSFIDDLE

How to make it work on IE11 ?

I have tried to use the StickyState polyfill, without any result.

#javascript #html #css

2 Likes86.35 GEEK