为什么内容在flexbox中溢出? [英] Why is content overflowing in flexbox?

问题描述

我遇到了一些我不了解的行为.当我设置徽章列表时，列表上的最大高度和列表项的空白，那么列表项的内容将按比例按比例溢出其容器.

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>
  

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

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>
  

那么为什么列表为display: flex; flex-direction: column而不是display: block时内容溢出?

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

推荐答案

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

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

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

This means they can shrink to avoid overflowing the container.

禁用此功能.将弹性项目设置为flex-shrink: 0.

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

更新(基于评论):

• 它在Firefox中不起作用.

实际上，以上解决方案已在Chrome，Firefox和Edge中进行了测试.它可以正常工作(小提琴演示).

Actually, the solution above was tested in Chrome, Firefox and Edge. It works (fiddle demo).

在删除flex-shrink: 0后，它仍可在Firefox中使用.

It still works in Firefox when flex-shrink: 0 is removed.

这是因为在Firefox中，另一个默认设置正在起作用:min-height: auto.这意味着弹性项目不能收缩到其内容高度以下. Chrome对此进行了干预"，将覆盖规范设置.

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?

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

The flex-shrink: 0 approach is a solid cross-browser solution.

最后一项的边距折叠.

这很可能是因为包含块是过度约束"的.

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

有关完整的说明和解决方案，请参见这篇文章:最后利润/填充在flexbox中崩溃

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

这篇关于为什么内容在flexbox中溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！