<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    body { padding-right: 100px; }
    div.x1 { border: 1px solid purple; overflow-x: scroll; overflow-y: hidden; width: 300px; margin: 0 50px 0 0; padding: 0; }
    div.x2 { height: 50px; }
    span { display: inline-block; height: 50px; margin: 0; }
  </style>
</head>
<body dir="rtl">
  <div class="x1">
    <span style="background: green; width: 50px; position: fixed; margin-inline-start: -50px"></span>
    <div class="x2">
      <span style="background: yellow; width: 400px; overflow: hidden"></span>
    </div>
  </div>
</body>
</html>