Why is content overflowing in flexbox?

Question

I am experiencing some behavior that I don't understand. When I set up a list of badges with a max-height on the list and margin on the list items then the content for the list items overflows their containers proportionally to the margin.

.badgers {
  display: flex;
  flex-direction: column;
  max-height: 10em;
  overflow: auto;
  border: 1px dashed red;
}

.badge, .title, .location, .timestamp {
  display: flex;
}

.badge {
  flex-direction: column;
  border: 1px solid black;
  margin: 1em 0;
}

<div class="badgers">
  <div class="badge">
      <span class="title">Title</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 2</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 3</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
</div>

If I remove the margin then there is no overflow.

.badgers {
  display: flex;
  flex-direction: column;
  max-height: 10em;
  overflow: auto;
  border: 1px dashed red;
}

.badge, .title, .location, .timestamp {
  display: flex;
}

.badge {
  flex-direction: column;
  border: 1px solid black;
}

<div class="badgers">
  <div class="badge">
      <span class="title">Title</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 2</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 3</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
</div>

If I change the wrapper to display: block and leave the margin then the list looks like what I want.

.badgers {
  max-height: 10em;
  overflow: auto;
  border: 1px dashed red;
}

.badge, .title, .location, .timestamp {
  display: flex;
}

.badge {
  flex-direction: column;
  border: 1px solid black;
  margin: 1em 0;
}

<div class="badgers">
  <div class="badge">
      <span class="title">Title</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 2</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
  <div class="badge">
      <span class="title">Title 3</span>
      <span class="location">Location</span>
      <span class="timestamp">Timestamp</span>
  </div>
</div>

So why does the content overflow when the list is display: flex; flex-direction: column but not when it is display: block?

Michael Benjamin · Accepted Answer · 2017-12-15T15:14:32.683

3

By default, flex items are set to flex-shrink: 1 (source).

This means they can shrink to avoid overflowing the container.

Disable this feature. Make your flex items flex-shrink: 0.

UPDATE (based on comments):

It doesn't work in Firefox.

Actually, the solution above was tested in Chrome, Firefox and Edge. It works (fiddle demo).
It still works in Firefox when flex-shrink: 0 is removed.

This is because in Firefox another default setting is in play: min-height: auto. This means that flex items can't shrink below the height of their content. Chrome does an "intervention" on this, which overrides the spec setting.

See this post for a full explanation: Why doesn't flex item shrink past content size?

The flex-shrink: 0 approach is a solid cross-browser solution.
The margin on the last item collapses.

This likely happens because the containing block is "over-constrained".

See this post for a full explanation and solutions: Last margin / padding collapsing in flexbox

edited Dec 15 '17 at 15:14

answered Dec 15 '17 at 14:32

Michael Benjamin

346,931
104
581
701

Thanks! I think that I can just put it on `.badge` and it will make room for its children so they wont shrink. – bygrace Dec 15 '17 at 14:36
@dippas, I tested in current Chrome, FF and Edge. It worked in all. https://jsfiddle.net/qw2pv0nd/ – Michael Benjamin Dec 15 '17 at 14:37
Same here, but when I removed `flex-shrink: 0;` in FF it still worked. Same for IE and Edge. Seems to be a chrome only issue? – bygrace Dec 15 '17 at 14:38
1

@Michael_B still the same output, if I understood OP, he wants space(`margin`) in last item showing and it doesn't in FF https://i.imgur.com/WotTOS5.png – dippas Dec 15 '17 at 14:40
@dippas The margin shows up for me in FF, IE, and Edge without the flex-shrink. Even adding `flex-shrink: 1` doesn't make it "break" in those browsers. – bygrace Dec 15 '17 at 14:42
@bygrace this is how I see it with or without `flex-shrink: 0` in FF https://i.imgur.com/N7gwxwI.png – dippas Dec 15 '17 at 14:43
@dippas I see your point. I actually don't want the margin on the top or bottom but didn't put that in the example. The example is setup so that I would expect it to be there. So thank you for pointing that out! – bygrace Dec 15 '17 at 15:01

Why is content overflowing in flexbox?

1 Answers1

Linked