I have a number of child items inside an explicit width parent e.g.

```js
document.querySelector('.parent').scrollTo(100,0)
```

```css
.parent {
  overflow: auto;
  width: 200px;
}
.child {
  font-size: 40px;
  background-color: blue;
  white-space: nowrap;
}
```

```html
<div class='parent'>
  <div class='child'>asdf asdf adsf asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
</div>
```

**I want the `child` items background to cover the complete child.** However it doesn't extend beyond the initial visible area. You can see what I mean in the image below where I've scrolled the parent horizontally: 

[![enter image description here](https://i.stack.imgur.com/BVTCo.png)](https://i.stack.imgur.com/BVTCo.png)