私はちょっとこれについていたし、これを共有していると思った position: sticky +フレックスボックスの問題：
私のスティッキーdivは、私がフレックスボックスコンテナに自分のビューを切り替えるまでうまくいきました。そして、flexボックスの親にラップされたときに、突然、スティッキーがスティッキーにならなくなりました。
.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>回答：
回答№1の場合は37フレックスボックス要素のデフォルトは stretchすべての要素は同じ高さであり、スクロールすることはできません。
追加する align-self: flex-start スティッキーエレメントにオートを設定してスクロールを許可し、固定します。
現在のところ、これは サポートされる 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>