I have div with horizontal scrollable content. Trying to apply overlay for the entire content just using css. This scrollable content may keep growing. Is there a way to achieve this without javascript code.

```css
.bg {
  height: 50px;
  width: 50px;
  display: flex;
}
.container {
  display: flex;
  overflow-x: auto;
  width: 300px;
  align-items: flex-start;
  position: relative;
  flex-direction: row;
}
.overlay {
  position: absolute;
  background-color: #888888;
  top: 0;
  opacity: 0.8;
  bottom: 0;
  right: 0;
  left: 0;
}
```

```html
<div class="container">
<div class="overlay">

</div>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
<img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/>
</div>
```