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

Question

I'm trying to make the position: sticky and display: flex properties 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.

It is not a problem if the position: sticky or display: flex doesn't work on IE11 as they both work separately:

Position: sticky; working demo

My main problem is that I want to have main content section and a sidebar menu next to it, that should be visible when scrolling. Using position: fixed is not an option here.

Answer 1

According to caniuse.com position: sticky is not supported in IE11 and display: flex have partial support because lots of bugs.

I don't have much experience with StickyState but I use StickyBits and it works just fine.

EDIT:

Working example

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky" id="stickyEl">
    This is the sticky box
  </div>
</div>

stickybits('#stickyEl');

body {
  height: 1500px;
}
.flexbox-wrapper {
  display: flex;
  display: -ms-flexbox;
}
.regular {
  background-color: blue;
  height: 600px;
  -ms-flex: 1 0 auto;

}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}