I have a large vertically scrolling element and inside that, I have a smaller horizontally scrolling element. (See the snippet)

```css
body {
  height: 100vh;
  overflow: hidden;
}

.large {
  height: 100%;
  font-size: 32px;
  overflow-y: scroll;
}

.tall {
  height: 120%;
}

.small {
  width: 100%;
  overflow-x: scroll;
  white-space: no-wrap;
}

.wide {
  width: 120%;
}
```

```html
<body>
  <div class="large">
    This is large content vertical content
    <br><hr><br>
    <div class="small">
      <div class="wide">This is smaller horizontal content</div>
    </div>
    <div class="tall"></div>
  </div>
</body>
```

When you hover it, the large vertical scrolls vertically fine, but I'd like it when you hover the horizontal content, for it to scroll automatically, so the user does not have to manually drag the scroll bar to scroll. Any way to do this with HTML, CSS or JavaScript?

Edit
----

I'd like for the horizontal scroll to be controlled by the scroll wheel, not at a consistent rate, if possible.