スクロールバーのcssが反映されない

ネットで調べながらスクロールバーを作成してみたのですが、
反映されなくて困っています。

<!--サイドバーと記事部分の作成-->
                <div class="main-contents wrapper">
                    <aside>                
                        <div class="box_scrollbar">
                            <p>5/20　8月にバーベキューします！</p>
                            <p>5/20　12月にクリスマス会をします！</p>
                            <p>5/20　4月に花見をします！</p>
                        </div>
                    </aside>

/*サイドバー*/
aside {
  width:22%;
}
/*サイドバーの設定*/
.box_scrollbar {
  color:black;
  overflow:hidden;
  overflow-y:scroll;
}
.box_scrollbar p{
  white-space:nowrap; 
 }

overflow:hidden;
overflow-y:scroll;
を
aside {
width:22%;
}
に入れても反映されませんでした。
どこかおかしい所がありますでしょうか？
またはやってることが全く違うのでしょうか？
ご指摘頂ければ幸いでございます。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか。

CSS
1.box_scrollbar {
2  color:black;
3  overflow:hidden;
4  overflow-x:scroll;/* CHANGE */
5}
6```**動くサンプル：**[https://jsfiddle.net/kth7x46e/](https://jsfiddle.net/kth7x46e/)