新しいタイトル: 私のポイントは、フレックスボックスを使用する場合、スティッキー要素のスティッキー プロパティは保持されないということです。

Question

しばらくこの問題で行き詰まっていたので、この position:sticky flexbox issue:

を共有したいと思いました。

スティッキー div は、フレックスボックス コンテナ ビューに切り替えた後、フレックスボックスの親要素でラップすると突然スティッキーでなくなりました。

.flexbox-wrapper {
  ディスプレイ: フレックス;
  高さ: 600ピクセル;
}
。通常 {
  背景色: 青;
}
.sticky {
  位置: -webkit-sticky;
  位置: スティッキー;
  トップ: 0;
  背景色: 赤;
}

<div class="flexbox-wrapper">
  <div class="レギュラー">
    こちらは普通の箱です
  </div>
  <div class="スティッキー">
    これは粘着ボックスです
  </div>
</div>

JSFiddle の表示の問題

Answer 1

私の場合、親コンテナに overflow-x: hidden; スタイルが適用されていたため、position: Sticky の機能が壊れてしまいます。このルールを削除する必要があります。

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

Answer 2

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

align-self: flex-start をスティッキー要素に追加し、高さを自動に設定することで、スクロールと固定を実現します。

現在、これはすべての主要なブラウザでサポートされていますが、Safari では引き続き -webkit- プレフィックスが必要ですが、Firefox を除く他のブラウザでは position:sticky が使用されます。 にはいくつかの問題があります。形状。

リーリー リーリー