css scroll without scrollbar

css scroll without scrollbar

HTML

<div class="parent">
    
    <div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales cursus semper. Praesent rutrum justo ut odio adipiscing consectetur. Morbi tortor enim, egestas eu magna sit amet, convallis iaculis tortor. Pellentesque accumsan viverra diam, ut rhoncus urna pharetra ac. Nunc ultricies elit vel facilisis faucibus. Fusce luctus dolor eget est faucibus pulvinar. Quisque rutrum erat eget ante volutpat, sed fermentum metus laoreet. Aliquam egestas tortor odio, lobortis malesuada tellus bibendum ut. Phasellus tincidunt luctus dolor, eu adipiscing justo blandit ut. Curabitur eget auctor nunc, vel euismod metus. Duis nec nulla at quam rhoncus interdum id at ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fringilla tempor enim id dapibus. In sapien urna, tempus a venenatis at, ullamcorper nec eros.        
    </div>    
<div>

CSS

.parent{
    height: 300px;
    border: 2px solid red;
    width: 300px;
    overflow: hidden;
}

.child{
    background-color: #4679bd;
    color: white;
    width: 400px;
    overflow-X: scroll;
    height: 100%;
    padding-bottom: 18px;
}