我在這上面停留了一會兒，我想我應該分享這個位置:sticky + flexbox gotcha:

我的粘性div工作得很好，直到我將視圖切換到flexbox容器，當div被包裝在flex box父容器中時，它突然變得不粘性了。

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

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

由于flex box元素默認為拉伸，所以所有元素的高度相同，不能滾動。

將align-self: flex-start添加到sticky元素，將高度設置為auto，這允許滾動，并修復了它。

目前，所有主流瀏覽器都支持這一點，但Safari仍然落后于-webkit-前綴，除了Firefox之外的其他瀏覽器都有一些位置問題:粘滯表。

.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>

在我的例子中，一個父容器有overflow-x:hidden；應用于它，這將打破位置:粘性功能。你需要刪除這條規則。

任何父元素都不應應用上述CSS規則。該條件適用于所有父元素，直到(但不包括)“body”元素。

如果在父元素中使用flex，請對要使其具有粘性的元素使用align-self: flex-start。

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

您還可以嘗試向flex項添加一個子div，其內容包含并分配position:sticky；top:0；敬那個。

這對于兩列布局的我來說很有用，其中第一列的內容需要是粘性的，第二列是可滾動的。

對于我的情況，align-self: flex-start(或justify-self: flex-start)解決方案不起作用。我還需要隱藏overflow-x:因為有些容器是水平滑動的。

我的解決方案需要嵌套的display:flex with overflow-y:auto來獲得所需的行為:

表頭可以動態調整高度，防止玩位置:絕對或位置:固定 內容垂直滾動，受視圖寬度的水平約束 粘性元素可以在垂直方向的任何地方，粘在頁眉的底部 其他元素可以水平滑動 看起來SO snippet工具不能在子元素上正確地呈現寬度來演示水平幻燈片，或者可能在我的實際布局上有一些其他的設置使它工作... 請注意，不做任何其他事情的包裝元素是允許overflow-x: auto在overflow-x: hidden父元素下的元素中正確工作所必需的

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已指定高度，并將溢出值設定為自動。 然后加上& quotalign-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 })，那么一切都應該按預期工作。

這對我很有效，但我不知道這是不是你的問題。 我的問題是當視窗太小時，flexbox中居中的內容會被隱藏

/*this is the wrapper of centered content*/
.section {
    overflow-y: auto;
    max-height: none;
    height: 100%;
    min-height: 100vh; /*optional, can be changed to anything*/
}

<div class="section">
   <div class="content">
      Some long content that is centered....
   </div>
</div>