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はよう分からんがうまくいく、、、進化を感じる