Show box-shadow of child element while parent element has overflow hidden?

Question

You can see the problem I'm having here : https://jsfiddle.net/xa6b8qmm/

I'm using overflow: hidden because I want to hide the scrollbar

However, this hides the left & right shadow of the elements.

I can't find a way to hide the scrollbar while at the same time allow for left/right sides of the box-shadow property to be visible.

Any ideas ?

CSS :

.noscrollbar {
    position: relative;
    float: left;
    height: 300px;
    width: 500px;
    overflow: hidden;
}

.scroller {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 60px;
}

.scroller div {
    float: left;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}
.scroller div:nth-child(1) {
    margin-top: 20px;
}

HTML :

<div class="noscrollbar">
    <div class="scroller">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Answer 1

Maybe you can try like this

.scroller div {
    float: left;
    width: calc(100% - 10px);
    height: 50px;
    margin:0 5px 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}

margin : top rightleft bottom;

width : calculate width - margin+padding;