can't hide scrollbar when using overflow: auto

Create an inner div: http://jsfiddle.net/sp95S/1/

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
}
#inner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;
}

It seems like you want to have the page still scroll without the scrollbar showing.

This has been answered here a couple of times already:

• hide scrollbar while still able to scroll with mouse/keyboard
• Hiding the scrollbar on an HTML page

Basically you can use javascript (or jquery, though you don't necessarily need it). On webkit browsers, there is a function to hide the scrollbars:

::-webkit-scrollbar { 
display: none; 
}

but it won't work for firefox or internet explorer or opera.

If you want to hide the scrollbar, but keep the functionality, you can use:

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}