position:sticky 在 IE 11 上不能与 display:flex 一起使用 [重复]答案

【问题标题】：position:sticky doesn't work together with display:flex on IE 11 [duplicate]position:sticky 在 IE 11 上不能与 display:flex 一起使用 [重复]
【发布时间】：2019-01-29 13:22:28
【问题描述】：

我正在尝试使 position: sticky 和 display: flex 属性在 Internet Explorer 11 上工作。

它在 Chrome、Firefox 和 Edge 上运行良好，但令人惊讶的是；它不适用于 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

如何让它在 IE11 上运行？

我尝试使用StickyState polyfill，但没有任何结果。

如果position: sticky 或display: flex 不能在IE11 上运行也不是问题，因为它们都是分开工作的：

Position: sticky; working demo

我的主要问题是我想在它旁边有一个主要内容部分和一个侧边栏菜单，滚动时应该可以看到。在这里使用position: fixed 不是一个选项。

【问题讨论】：

IE11 不支持position: sticky。 caniuse.com/#search=sticky
Flex 在 IE11 上几乎可以正常工作，这不是这里的问题
这两者是分开工作的，至少在基本支持方面是这样。但它似乎无法结合使用。
我会为此使用航点，直到我们摆脱 ie 11：imakewebthings.com/waypoints/shortcuts/sticky-elements
@gringo_dave 请将解决方案添加为答案，而不是作为问题的编辑。

标签： javascript html css flexbox sticky

【解决方案1】：

根据 caniuse.com 的位置：IE11 不支持sticky 和 display: flex 有部分支持，因为有很多错误。

我对 StickyState 没有太多经验，但我使用 StickyBits 并且效果很好。

编辑：

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;
}

【讨论】：

这似乎现在可以工作了：jsfiddle.net/n9yLrh76/5

【解决方案2】：

这是用于显示：flex

将此样式添加到您的 flexbox-wrapper 类中：

.flexbox-wrapper {
      display: -ms-flexbox;
      }

然后

.regular {
    -ms-flex: 1 0 auto;
    }

flex 简写计算为 flex-grow、flex-shrink、flex-basis

【讨论】：

不幸的是，这没有帮助。