Hide vertical scrollbar whilst remaining scrollable - html

Question

I want the vertical scrollbar for my div to be invisible, but still allow vertical scrolling.
I've tried using overflow-y: hidden but that disables scrolling.
I've tried webkit element::-webkit-scrollbar but that affects horizontal scrollbars too.
I would have thought that webkit's :vertical state would allow me to do it but it doesn't do anything. See codepen: (https://codepen.io/numberjak/pen/MWgOMqd)
Other questions look at BOTH scrollbars, I just care about ONE scrollbar.
<div class="scroll"><div class="large-content"/></div>
.scroll {
overflow: auto;
max-width: 20rem;
max-height: 20rem;
background-color: black;
}
.scroll::-webkit-scrollbar:vertical {
display: none;
}
.large-content {
min-width: 100rem;
min-height: 100rem;
background-color: red;
}

Answer 1

Try this css code..
css
.large-content {
background-color: red;
width: 100%;
height: 100%;
}

Answer 2

You can do the following to hide scrollbars:
-webkit- (Chrome, Safari, newer versions of Opera):
.scoll::-webkit-scrollbar { width: 0 !important; }
-moz- (Firefox):
.scroll { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.scroll { -ms-overflow-style: none; }
Important points to be considered before hiding the scroll bar:
Preferably hide scrollbars only if and when all content is visible else the user may skip the content.
Avoid horizontal scrolling on web pages and do not hide horizontal scroll bar as they can make content difficult to read
If at all, hiding scroll is required: Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Reference