スクロールできる要素の中で特定の要素を下に固定する

2022-05-06
2022-05-06

問題

------------ scroll area scroll area scroll area ------------ fixed element // 👈 固定したい! ------------

position: stickyなどでも良いが、heightを設定しないといけないので、計算が面倒になる。

実装

css
.container { display: flex; flex-direction: column; height: 100%; } .scroll-area { flex-grow: 1; }
html
<div class='container'> <div class='scroll-area'>...</div> 👈 ここでスクロールするようにする <div>...</div> 👈 下に固定される </div>