由于flex box元素默认为stretch，因此所有元素的高度都相同，无法滚动。
将align-self: flex-start添加到sticky元素将高度设置为auto，这允许滚动，并修复了它。
目前，所有主流浏览器都支持这一点，但Safari仍然支持-webkit-前缀，除Firefox外的其他浏览器在position: sticky表方面存在一些问题。

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}

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

JSFiddle showing the solution

在我的例子中，其中一个父容器应用了overflow-x: hidden;，这将破坏position: sticky的功能。您需要删除该规则。

任何父元素都不应应用上述CSS规则。此条件适用于所有父元素，直到（但不包括）'body'元素。

如果在父元素中使用flex，请使用align-self：flex-start用于你想使其粘滞的元素。

position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;

您也可以尝试将子div添加到flex项中，并将position: sticky; top: 0;分配给它。
这对我来说是一个两列的布局，第一列的内容需要是粘性的，第二列的内容是可滚动的。

对于我的情况，align-self: flex-start（或justify-self: flex-start）解决方案不起作用。我还需要保留overflow-x: hidden，因为一些容器水平滑动。
我的解决方案需要将display: flex与overflow-y: auto嵌套以获得所需的行为：

• header可以动态调整高度，防止播放position: absolute或position: fixed
• 内容垂直滚动，水平限制为视图宽度
• 粘性元件可以在垂直方向上的任何位置，粘在顶盖的底部
• 其它元件可以水平滑动
• 看起来SO代码片段工具无法在子元素上渲染width来正确演示水平幻灯片，或者可能在我的实际布局上有一些其他设置使其工作...
• 请注意，要使overflow-x: auto在父元素overflow-x: hidden下的元素中正确工作，需要一个不做任何其他事情的 Package 器元素

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}

<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

确保flex-wrapper已经分配了一个高度，并将溢出值设置为auto。然后添加“align-self：灵活启动;“到粘性元素。

.flexbox-wrapper {
  display: flex;
  height: 600px;  //<- nessary,and don't assign with %
  overflow:auto;  //<-fix
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
  align-self: flex-start; // <-fix
}

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

我做了一个临时的flexbox表，遇到了这个问题。为了解决这个问题，我简单地把粘性标题行放在flexbox的外面，就在它的前面。

根据我的经验，全局解决方案/规则：

请勿将具有粘性元素的结构直接放入{ display：flex }容器。

相反（对于Flex布局），将带有粘性元素的表/div放在Flex子容器中（例如，使用{ flex：1 1 auto }，但不带{ display：flex }），那么一切都应该按预期工作。