Question

我遇到了一些我不明白的行为。当我设置列表中具有最大高度和列表项上的边距的徽章列表时，列表项的内容会按比例溢出其容器。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

那么，为什么列表为display: flex; flex-direction: column时内容会溢出，而display: block时则不会溢出？

Answer 1

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

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

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

更新（根据评论）：

在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

为什么内容在flexbox中溢出？

1 个答案: