css - flex 元素应该溢出 flex 容器而不是断行吗？

Question

我有这样的布局:

• A row flex container用definite size ，例如宽度:175px
• A flex item
  • 在definite 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 flex 元素的是它的 max-content

   Size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content. [...] The flex base size is the item’s resulting main size.

2. 由于没有最小和最大大小限制，hypothetical main size flex 元素的是相同的值

   The hypothetical main size is the item’s flex base size clamped according to its min and max main size properties.

3. Resolving Flexible Lengths算法卡住不灵活的 flex 元素并设置其 target main size到它的hypothetical main size

   Size inflexible items. Freeze, setting its target main size to its hypothetical main size any item that has a flex factor of zero

4. 最后，main size这个值也是:

   Set each item’s used main size to its target main size.

因此，您的 flex 元素的大小应该像它具有 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 更正百分比，例如最大宽度:计算(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>