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 right margin of the last item is being collapsed.

Is there a way to stop this happening, or a good workaround?

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>

Solution 1

Potential Problem #1

The last margin is not being collapsed. It's being ignored.

The overflow property applies only to content. It doesn't apply to padding or margins.

Here's what it says in the spec:

11.1.1 Overflow: the overflow property

This property specifies whether content of a block container element is clipped when it overflows the element's box.

Now let's take a look at the CSS Box Model:

^{source: W3C}

The overflow property is limited to the content box area. If the content overflows its container, then overflow applies. But overflow doesn't enter into the padding or margin areas (unless, of course, there is more content that follows).

---

Potential Problem #2

The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.

div {
  height: 150px;
  overflow: auto;
  width: 600px;
  background: orange;
  white-space: nowrap;
}
span {
  background: blue;
  color: #fff;
  padding: 50px;
  margin: 0 30px;
  display: inline-block;
}

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

Hence, maybe the problem is instead related to elements that are "over-constrained".

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

If width is not auto and border-left-width + padding-left + width + padding-right + border-right-width (plus any of margin-left or margin-right that are not auto) is larger than the width of the containing block, then any auto values for margin-left or margin-right are, for the following rules, treated as zero.

If all of the above have a computed value other than auto, the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the direction property of the containing block has the value ltr, the specified value of margin-right is ignored and the value is calculated so as to make the equality true. If the value of direction is rtl, this happens to margin-left instead

(emphasis added)

So, according to the CSS Visual Formatting Model, elements may be "over-constrained" and, as a result, a right margin gets tossed out.

---

Potential Workarounds

Instead of margin or padding, use a right border on the last element:

li:last-child {
  border-right: 30px solid orange;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100px; /* adjusted for demo */
  overflow: auto;
  width: 600px;
  background: orange;
}
ul li {
  background: blue;
  color: #fff;
  padding: 90px;
  margin: 0 30px;
  white-space: nowrap;
  flex-basis: auto;
}
li:last-child {
  border-right: 30px solid orange;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Another solution uses a pseudo-elements instead of margins or padding.

Pseudo-elements on a flex container are rendered as flex items. The first item in the container is ::before and last item is ::after.

ul::after {
  content: "";
  flex: 0 0 30px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100px; /* adjusted for demo */
  overflow: auto;
  width: 600px;
  background: orange;
}
ul li {
  margin: 0 30px;
  background: blue;
  color: #fff;
  padding: 90px;
  white-space: nowrap;
  flex-basis: auto;
}
ul::after {
  content: "";
  flex: 0 0 30px;
}

ul::before {
  content: "";
  flex: 0 0 30px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Solution 2

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;
}

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

Solution 3

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;
}

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

Comments

[Kevin Wilson]

With that solution, the margin will collapse to 0 if the container is narrower than the combined widths of the list items so doesn't really fit my requirements. I also need to be able to specify the margin width of each item.

[Marcos Pérez Gude]

So you don't need flexbox. You need a normal layout. You can use display inline-block or floats, and white-space to avoid line break. But this requirements have nothing to do with flexbox (flexible boxes), and you don't need that flexible boxes, you need a fixed-fluid layout.

[Kevin Wilson]

I'm using flexbox because I want to have consistent heights for elements. I'm also wrapping to different rows on larger viewports; the scroll is just for small screens. The overview of the spec I read mentions collapsing top and bottom margins, but not left and right. The left margin of the first item isn't collapsed, so I thought it odd that the RHS of the last item was. I appreciate your help, it's just not answering the question about the collapsing margin.

[Marcos Pérez Gude]

Don't worry. Each one knows what requirements needs for his project. I don't know all your requirements. So I wish you good luck, but I remove this answer since it's not what you want. The last margin here is working fine ;) In your code I think it's the problem of the total width, or the width of the elements. Each element's size is at least 200px with 60px margin, you have 4 elements, and the total width of the parent box is 600px. Simply it doesn't fit.

[Akansh]

Note: If you're using definite width on each element and add the border-right to last element, this will impact the visible width of that element as border is part of the element in case of border-box is of box-sizing. Change the box-sizing to default or content-box.

[Alexandre Daubricourt]

border-left: 10vw solid transparent; solved all my troubles, thanks!