私の立場：flexboxを使用するとスティッキー要素がスティッキーではない

Question 1

私はこれに少し立ち往生していて、これとposition: stickyフレックスボックスの落とし穴を共有したいと思いました：

ビューをフレックスボックスコンテナに切り替えるまで、スティッキーdivは正常に機能していましたが、フレックスボックスの親にラップされたときに突然divがスティッキーではなくなりました。

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

スニペットを展開

問題を示すJSFiddle

Question 2

フレックスボックス要素はデフォルトで stretch、すべての要素は同じ高さであり、スクロールすることはできません。

追加 align-self: flex-startスティッキー要素にして、高さを自動に設定しました。これにより、スクロールが可能になり、修正されました。

現在、これはすべての主要なブラウザでサポートされていますが、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

Question 3

私の場合、親コンテナの1つがoverflow-x: hidden;適用されていたため、position: sticky機能が損なわれます。そのルールを削除する必要があります。

親要素に上記のCSSルールを適用しないでください。この条件は、「body」要素までの（ただし含まない）すべての親に適用されます。

Question 4

また、コンテンツを含むフレックスアイテムに子divを追加して、それに割り当てるposition: sticky; top: 0;こともできます。

これは、最初の列の内容を固定する必要があり、2番目の列がスクロール可能であるように見える2列のレイアウトでうまくいきました。

Question 5

その場しのぎのフレックスボックステーブルを作成しましたが、この問題が発生しました。これを解決するには、スティッキーヘッダー行をフレックスボックスの外側の直前に配置します。

Question 6

私の状況では、align-self: flex-start（またはjustify-self: flex-start）ソリューションは機能しません。私は保つ必要がありますoverflow-x: hidden一部のコンテナは水平方向にスワイプするので、もます。

私のソリューションでは、目的の動作display: flexを実現overflow-y: autoするためにネストする必要がありました。

ヘッダーは高さを動的に調整できるため、position: absoluteまたはposition: fixed
コンテンツは垂直方向にスクロールし、ビュー幅に水平方向に制限されます
スティッキー要素は、ヘッダーの下部に貼り付けて、垂直方向のどこにでも配置できます
他の要素は水平方向にスライドできます
- SOスニペットツールがwidth子要素をレンダリングして水平スライドを適切に表示できないように見えます。または、実際のレイアウトに他の設定があり、それが機能する可能性があります...
- 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>

スニペットを展開