flex项目是否应该溢出flex容器而不是断开行？

Question

我有这个布局：

• 一个行 flex容器，具有明确的尺寸，例如width: 175px
• 一个flex项目
  • 具有明确的 flex-basis，例如flex-basis: content
  • 是不可伸缩的，例如flex: none。
  • 其max-content大小大于可用空间
  • 其min-content大小小于可用空间

.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不会自动换行，导致弹性项目溢出了弹性容器：

谁是对的？我该如何修复这个问题？

- Oriol

Answer 1

这就是发生的事情：

1. 行长确定算法确定flex项目的flex基础尺寸是其max-content。

   使用其已用的flex基础尺寸代替其主轴尺寸，将值content视为max-content，将该项大小调整为可用空间。flex基础尺寸是该项的结果主轴尺寸。

2. 由于没有最小或最大尺寸约束，因此flex项目的假设主轴尺寸与同一值。

   假设主轴尺寸是该项的flex基础尺寸，根据其最小和最大主轴尺寸属性进行夹紧。

3. 解决可伸缩长度算法冻结不灵活的flex项目，并将其目标主轴尺寸设置为其假设主轴尺寸。

   调整不灵活的项的大小。任何具有零flex因子的项都将被冻结，并将其目标主轴尺寸设置为其假设主轴尺寸。

4. 最后，主轴尺寸也是该值:

   将每个项目的已用主轴尺寸设置为其目标主轴尺寸。

因此，您的flex项目应该被调整为像具有flex-basis: max-content一样进行大小调整。Chrome、Edge和IE都可以正确执行。

相反，Firefox似乎会将其大小调整为flex-basis: fit-content。在我看来，这更合理，但它不是标准。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 constraint）。

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>

- Oriol