У меня есть список элементов, которые я пытаюсь расположить в прокручиваемом горизонтальном макете с помощью flexbox.

Каждый элемент в контейнере имеет поле слева и справа, но правое поле последнего элемента свернуто.

Есть ли способ остановить это или хороший обходной путь?

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  overflow: auto;
  width: 600px;
  background: orange;
}
ul li {
  background: blue;
  color: #fff;
  padding: 90px;
  margin: 0 30px;
  white-space: nowrap;
  flex-basis: auto;
}

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>