Use box shadow inside scrollable div

Question

I've a problem. I'm implementing a wrapper with 3 divs inside. Each div has a min width. When I shrink the browser and the min width get's reached, the overflow: auto get's enabled. The problem is now that my boy shadow get's cut off in this case. Maybe there is a way to handle this that the shadow is still there?

div {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

span {
  min-width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

span:not(:last-child) {
  margin-right: 15px;
}

<div>
    <span>HI</span>
    <span>HI</span>
    <span>HI</span>
</div>

Answer 1

I think you need to add padding to the root of box.

simply add "padding: 5px;" to the "div" like this.

div {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 5px;
}

span {
  min-width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);

}

span:not(:last-child) {
  margin-right: 15px;
}

<div>
    <span>HI</span>
    <span>HI</span>
    <span>HI</span>
</div>