Question

我有这个布局：

row flex container definite size，例如width: 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会破坏弹性项目中的线条并将其宽度设置为可用空间。

但是，Chrome不会破坏线条，因此Flex项目会溢出Flex容器：

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

Answer 1

这就是：

Line Length Determination算法确定Flex项的flex base size为max-content

使用其available space代替其flex basis将项目放入main size的大小，处理值为 content为max-content。 [...] flex base size是该项目的结果为main size。
由于没有min或max size约束，flex项的hypothetical main size是相同的值

hypothetical main size是项目的flex base size 根据其最小和最大主要尺寸属性进行夹紧。
Resolving Flexible Lengths算法会冻结不灵活的Flex项目并将其target main size设置为hypothetical main size

尺寸不灵活的物品。冻结，将其目标主要大小设置为其 hypothetical main size任何flex因子为零的项目
最后，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不支持fit-content上的flex-basis，但会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>

flex项目应该溢出flex容器而不是破坏线？

1 个答案: