Flexbox overflow-x last margin [duplicate]

Question

I use a translator. My opinion can not be passed on exactly.

ul {
  display: flex;
  overflow-x: auto;
  border: 1px solid aqua;
  background-color: tomato;
  width: 400px;
  list-style:none;
  padding-left:0px;
}
li {
  border: 1px solid Aquamarine;
  min-width: 300px;
  margin: 10px;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>

https://codepen.io/anon/pen/bLJREL

Unlike what I was trying to do, there is no margin in the last element.

What if you want to add margin after the 'item4' element?

Answer 1

You could use :after pseudo-element with width same as margin to create that space but then you also need to remove margin-right from last li.

ul {
  display: flex;
  overflow-x: auto;
  border: 1px solid aqua;
  background-color: tomato;
  width: 400px;
  list-style: none;
  padding-left: 0;
}
ul:after {
  content: '';
  flex: 0 0 10px;
}
li {
  border: 1px solid Aquamarine;
  min-width: 300px;
  margin: 10px;
}
li:last-child {
  margin-right: 0;
}

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>