弹性项目应该溢出弹性容器而不是断线吗？

Question

我有这个布局：

• rowflex container 和 definite size，例如width: 175px
• 一个flex item
  • 带有 indefinite flex-basis，例如flex-basis: content
  • 这是不灵活的，例如flex: none。
  • 谁的max-content size 大于available space
  • min-content size 小于 available space

.flex-container {
  display: flex;
  width: 175px;
  border: 3px solid black;
  margin-bottom: 10px;
}
.flex-item {
  flex: none;
  border: 3px solid blue;
  margin: 3px;
}
.box {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border: 3px solid red;
  margin: 3px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

正如预期的那样，Firefox 会在 flex 项目内换行并将其宽度设置为可用空间。

但是，Chrome 不会换行，因此 flex 项会溢出 flex 容器：

谁是对的？我该如何解决这个问题？

Answer 1

会发生这样的事情：

1. Line Length Determination 算法确定弹性项目的flex base size 是它的max-content

   使用其使用的flex basis 代替其main size，将项目大小调整为available space，处理值为 content 为 max-content。 [...]flex base size 是 该项目的结果main size。

2. 由于没有最小或最大尺寸限制，弹性项目的hypothetical main size 是相同的值

   hypothetical main size 是项目的flex base size 根据其最小和最大主要尺寸属性进行钳制。

3. Resolving Flexible Lengths 算法冻结不灵活的弹性项目并将其target main size 设置为其hypothetical main size

   尺寸不灵活的物品。冻结，将其目标主尺寸设置为其 hypothetical main size 任何弹性系数为零的项目

4. 最后，main size 也是那个值：

   将每个项目使用的main size 设置为其target main size。

因此，您的弹性项目的大小应该与 flex-basis: max-content 一样。 Chrome、Edge 和 IE 都做得很好。

相反，Firefox 的大小似乎与 flex-basis: fit-content 一样。 IMO 这更合理，但不是标准的。 Bug 876985 应该可以解决这个问题。

同时，要在 Firefox 上实现标准行为，您可以使用

flex-basis: -moz-max-content;

.flex-container {
  display: flex;
  width: 175px;
  border: 3px solid black;
  margin-bottom: 10px;
}
.flex-item {
  flex: none;
  flex-basis: -moz-max-content;
  border: 3px solid blue;
  margin: 3px;
}
.box {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border: 3px solid red;
  margin: 3px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

相反，如果你想要 Firefox 在其他浏览器上的行为，那就没那么容易了。

Chrome 不支持flex-basis 上的fit-content，但支持width（带前缀）

flex-basis: auto;
width: -webkit-fit-content;
width: fit-content;

.flex-container {
  display: flex;
  width: 175px;
  border: 3px solid black;
  margin-bottom: 10px;
}
.flex-item {
  flex: none;
  width: -webkit-fit-content;
  width: fit-content;
  border: 3px solid blue;
  margin: 3px;
}
.box {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border: 3px solid red;
  margin: 3px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

但是，IE/Edge 在任何地方都不支持fit-content。但是最大约束应该适用于所有浏览器

max-width: 100%;
box-sizing: border-box; /* Include paddings and borders */

请注意，约束不包括边距，因此您可能需要使用 calc 更正百分比，例如max-width: calc(100% - 6px).

.flex-container {
  display: flex;
  width: 175px;
  border: 3px solid black;
  margin-bottom: 10px;
}
.flex-item {
  flex: none;
  max-width: calc(100% - 6px);
  box-sizing: border-box;
  border: 3px solid blue;
  margin: 3px;
}
.box {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border: 3px solid red;
  margin: 3px;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>