Why is padding-righ inside scrolled element missing?

<div class="outer">
  <div class="inner">
    padding on the right is missing
  </div>
</div>

div {
  border: 2px solid black;
}

.outer {
  max-width: 100px;
  overflow-x: scroll;
  padding: 10px;
}

.inner {
  width: 200px;
  padding: 5px;
}

Also: as workaround I can add display: flex; text-wrap: nowrap; on .outer.