为什么flexbox内容会溢出？

Question

我遇到了一些我不理解的行为。当我在列表上设置最大高度并在列表项上设置边距的徽章列表时，列表项的内容会与边距成比例地溢出其容器。

.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>
  

如果我删除边距，则没有溢出。

.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>
  

如果我将包装器更改为 display: block 并保留边距，那么列表看起来就像我想要的那样。

.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>
  

那么为什么列表为display: flex; flex-direction: column时内容溢出，而列表为display: block时却没有？

Answer 1

默认情况下，弹性项目设置为flex-shrink: 1 (source)。

这意味着它们可以收缩以避免溢出容器。

禁用此功能。制作你的弹性项目flex-shrink: 0。

---

更新（基于 cmets）：

• 它在 Firefox 中不起作用。

  实际上，上面的解决方案已经在 Chrome、Firefox 和 Edge 中进行了测试。它可以工作 (fiddle demo)。

• 当 flex-shrink: 0 被移除时，它仍然可以在 Firefox 中使用。

  这是因为在 Firefox 中使用了另一个默认设置：min-height: auto。这意味着弹性项目不能缩小到其内容的高度以下。 Chrome 对此进行了“干预”，从而覆盖了规范设置。

  完整的解释请看这篇文章：Why doesn't flex item shrink past content size?

  flex-shrink: 0 方法是可靠的跨浏览器解决方案。

• 最后一项的边距折叠。

  这可能是因为包含块“过度约束”。

  完整的解释和解决方案请看这篇文章：Last margin / padding collapsing in flexbox