Macでモーダル領域にある要素にのみ常時スクロールバーを表示させる方法を教えてください！

Mac上で、モーダルを開いた時のみ、その要素にスクロールバーを常時表示させたいと考えています。

・http://a-side-job.com/web_material/bar_css/
この記事を参考にして、以下のコードを書いたのですが狙い通りには修正されませんでした。
修正方法わかる方よろしくお願いいたします。

html
1<body>
2　　 <!-- モーダルを開くためのリンク -->
3    <div>
4        <a class="modal-open">モーダルを開きます。</a>
5    </div>
6　　 <!-- モーダル自体 -->
7    <div class="modal">
8        <!-- この要素のみスクロールバーを常時表示させる。 -->
9        <div class="modal_con">モーダル内要素</div>
10        <div class="modal_con">モーダル内要素</div>
11        <div class="modal_con">モーダル内要素</div>
12    </div>
13</body>

css
1.modal{
2    width: 855px;
3    margin: 0 auto;
4}
5.modal_con{
6    width: 257px;
7    float: left;
8    border: 1px solid #EBEBEB;
9    border-top: none;
10}
11<!-- 対策１：どこにも変化がない -->
12.modal_con::-webkit-scrollbar {
13    -webkit-appearance: none;
14    width: 7px;
15}
16.modal_con::-webkit-scrollbar-thumb {
17    border-radius: 4px;
18    background-color: rgba(0,0,0,.5);
19    box-shadow: 0 0 1px rgba(255,255,255,.5);
20}
21<!-- 対策２：全てにスクロールバーがついてしまう。 -->
22::-webkit-scrollbar {
23    -webkit-appearance: none;
24    width: 7px;
25}
26::-webkit-scrollbar-thumb {
27    border-radius: 4px;
28    background-color: rgba(0,0,0,.5);
29    box-shadow: 0 0 1px rgba(255,255,255,.5);
30}
31<!-- 対策3：どこにも変化ない -->
32.modal::-webkit-scrollbar {
33    -webkit-appearance: none;
34    width: 7px;
35}
36.modal::-webkit-scrollbar-thumb {
37    border-radius: 4px;
38    background-color: rgba(0,0,0,.5);
39    box-shadow: 0 0 1px rgba(255,255,255,.5);
40}