スクロールバーが表示されてもコンテンツがガタつかない筋肉的解決策

中の要素の高さによってスクロールバーを自動的に表示する方法としてoverflow-y:autoがあります。
しかしスクロールバーを表示するとその分だけ中の要素の横幅が変わりガタついてしまいます。

overflow-y:auto;

ガタつくコンテンツ

解決策

スクロールバーが非表示から表示に切り替わるときにガタつくなら最初から表示させておけばいいのです。

overflow-y:scroll;

このままだとスクロールバーが目立つため背景色をbackground-color: inheritで同化させます。

.scroll{
    padding: 10px 6px 10px 10px;
    overflow-y:scroll;
    @media (any-hover: hover) and (any-pointer: fine) {
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background-color: inherit;
    }
  }
}