【CSS】ウィジェットをstickyに（スクロール後も、画面内に残す）
当HPのウィジェットをstickyにしました。
（ブログ記事の横にあるカテゴリーなどの部分）
stickyにしたことで。
記事をスクロールしても、画面内にカテゴリーが残るようになりました。
以下、CSSの考え方についての備忘録です。
html
<body>
<div class="container">
<main class="main-box"></main>
<aside class="side-box"></aside>
</div>
</body>css
/* 全体のボックス */
.container {
display: flex; /* <main> と <aside> を横並びに */
max-width: 1000px; /* 全体の幅（最大） */
gap: 20px; /* <main> と <aside> の空き幅 */
margin: auto; /* 左右中央に */
}
/* メインコンテンツ */
.main-box {
flex: 1; /* 横幅いっぱいに */
}
/* サイドバー */
.side-box {
position: sticky; /* 画面内に残す */
height: fit-content; /* 縦幅スッキリ */
top: 20px; /* 表示位置（上） */
width: 200px; /* サイドバーの横幅 */
}引っかかった点
body に overflow-x: hidden を当てていたら、うまく機能しませんでした。
overflow-x を取るか、overflow-x: clip に変更したら、期待する動きを見せるようになりました。