How to make div shadow come over its children?

Question

I want the inner shadow of my div to come over it's content (please note that I don't simply want the image to have an inner shadow, I have a much more complicated scrollable div with so many children this is just a minimal example.

div {
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
}

img {
  display: block;
}

<div>
  <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png" />
</div>

Answer 1

Agree with Vitalii Chmovzh answer, but in case you don't want any space by padding.

So just use this for your img tag.

img{
  display: block;
  position:relative;
  z-index:-1;
}

Without changing sizes of your box model.

Updated fiddle