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

Your problem is not the margin in itself. It's the scroll bar dimensioning only the visible content of the element.

One hack to solve it would be to create a visible element that occupies the margin

This solution handles this using a pseudo on the last child

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;
  position: relative;
}
li:last-child:after {
  content: "";
  width: 30px;
  height: 1px;
  position: absolute;
  left: 100%;
  top: 0px;
}

  

    
Item 1
    
Item 2
    
Item 3
    
Item 4