Horizontal scrolling area (iOS inertia style) with just CSS

Horizontal scroller.html

<!-- Source: https://benfrain.com/horizontal-scrolling-area-css-overflow-ios/ --> 

<div class="outer">
<div class="wrapper">
  <a href="" class="internal">item 1</a>
  <a href="" class="internal">item 2</a>
  <a href="" class="internal">item 3</a>
  <a href="" class="internal">item 4</a>
  <a href="" class="internal">item 5</a>
  <a href="" class="internal">item 6</a>
  <a href="" class="internal">item 7</a>
  <a href="" class="internal">item 8</a>
  <a href="" class="internal">item 9</a>
  <a href="" class="internal">item 10</a>
  <a href="" class="internal">item 11</a>
  <a href="" class="internal">item 12</a>
  <a href="" class="internal">item 13</a>
  <a href="" class="internal">item 14</a>
  <a href="" class="internal">item 15</a>
  <a href="" class="internal">item 16</a>
  <a href="" class="internal">item 17</a>
  <a href="" class="internal">item 18</a>
  <a href="" class="internal">item 19</a>
  <a href="" class="internal">item 20</a>
  <a href="" class="internal">item 21</a>
  <a href="" class="internal">item 22</a>
  <a href="" class="internal">item 23</a>
  <a href="" class="internal">item 24</a>
  <a href="" class="internal">item 25</a>
  <a href="" class="internal">item 26</a>
  <a href="" class="internal">item 27</a>
  <a href="" class="internal">item 28</a>
  <a href="" class="internal">item 29</a>
  <a href="" class="internal">item 30</a>
</div>
</div>
<div class="text"> hello, I should stay put</div>

style.css

body {
  background-color: #333;
}

.outer {
	white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.wrapper {
  width: 100%;
  
  padding: 1rem;
  background-color: #eee;
}

.internal {
  display: inline;
  background-color: rebeccapurple;
}

.text {
	font-size: 2rem;
	color: white;
}