fluid div with horizontal scrolling list inside

index.html

<div class="fluid">
  <div class="wrapper">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

screen.scss.css

.fluid {
  width: 100%;
  border: 1px solid black;
  overflow: hidden;
  .wrapper {
    overflow-x: scroll;
    ul {
      border: 1px dashed blue;
      white-space: nowrap;
      li {
        border: 1px solid yellow;
        display: inline-block;
        width: 300px;
      }
    }
  }
}