Last margin / padding collapsing in flexbox / grid layout

Question

I have a list of items that I\'m trying to arrange into a scrollable horizontal layout with flexbox.

Each item in the container has a margin left and right, but the

Answer 1

You can set width and overflow on the div container, and set display: inline-flex rather than flex on the ul, so that the size of the flex box will be calculated based on the items inside, and all padding and margin will apply without any issues.

.container {
  width: 600px;
  overflow: auto;
}

.container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  background: orange;
}

.container li {
  padding: 60px;
  margin: 0 30px;
  white-space: nowrap;
  background: blue;
  color: #fff;
}

  

    
Item 1
    
Item 2
    
Item 3
    
Item 4