CSS で div にスクロールを追加し、スクロール バーを非表示にする

<div class="box">
    <div>次のコンテンツは別々にスクロールします</div>
    <div class="スクロール">
        <div class="content">
            <p>1111111111111111</p>
            <p>22222222222222</p>
            <p>333333333333333</p>
            <p>44444444444444</p>
            <p>1111111111111111</p>
            <p>22222222222222</p>
            <p>333333333333333</p>
            <p>44444444444444</p>
        </div>
    </div>
</div>

<スタイル>
    div{
        フォントサイズ: 15px;
        下マージン: 20px;
    }
    。コンテンツ{
        height: 300px;v // スクロール部分の高さを設定する必要があります background-color: cadetblue;
        色: アンティークホワイト;
        overflow-x: hidden; /*x軸のスクロールは禁止されています*/
            overflow-y: scroll;/*y軸スクロール*/ 
    }
    .content::-webkit-スクロールバー{
        display: none;/*スクロールバーを非表示*/ 
    }
    p{
        下部マージン: 30px;
        フォントサイズ: 17px;
        色: #333;
    }
</スタイル>