web-dev-qa-db-ja.com

私の位置：flexboxを使用すると、スティッキー要素はスティッキーではありません

私はこれで少し立ち往生し、このposition: sticky + flex box gotchaを共有すると思った：

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

cssflexboxsticky
55
BHOLT

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

align-self: flex-startをsticky要素に追加すると、高さがautoに設定され、スクロールが許可され、修正されました。

現在、これは サポート SafariおよびEdgeのみです

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

96
BHOLT