🎴
flexでスクロール時にボーダーや背景が途切れるときの対応
tl;dr
gridを使用すればok.
違うところ
grid
gridではoverflowで隠れてる部分もボーダーや背景色がちゃんと設定されてます。リストアイテムのwidthが、そこまであるからですね。
.grid-version {
display: grid;
grid-template-rows: repeat(auto-fill, 1fr);
}
flexbox
gridとは違い、flexではoverflowで隠れてる部分にはボーダーも背景色もありません。リストアイテムのwidthが、最初に表示されている領域と同じ幅になっているからですね。
.flex-version {
display: flex;
flex-direction: column;
}
まとめ
flexでなんとかしようとしたけどよくわからんかった、、、
gridはよう分からんがうまくいく、、、進化を感じる
Discussion