☰

私の立場: flexbox を使用すると、sticky 要素はstickyになりません。質問する

tag-icon • tag-icon css flexbox css-position sticky
私の立場: flexbox を使用すると、sticky 要素はstickyになりません。質問する

私はこれに少し行き詰まっていたのですが、これを共有しposition: sticky、flexbox の落とし穴を知ろうと思いました:

ビューをフレックスボックス コンテナーに切り替えるまでは、スティッキー 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

ベストアンサー1

フレックス ボックス要素はデフォルトで に設定されているため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

おすすめ記事