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

Question

我有这个布局:

• 一排 柔性容器有一定的大小,如width: 175px
• 一个弹性项目
  • 有明确的 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不会破坏线条,因此Flex项目会溢出Flex容器:

谁是对的？我怎样才能解决这个问题？

Answer 1

发生的情况是这样的：

\n\n

\n

1. 线长度确定算法确定Flex 项目的Flex 基础尺寸为其max-content

   \n\n

   \n

   使用其使用的flex\n 基础代替其主要大小，将项目调整为可用空间，将值 \n 视为。[...] Flex 基本尺寸是项目\xe2\x80\x99s 生成的主要尺寸contentmax-content。

   \n

\n

2. 由于没有最小或最大尺寸限制，假设的主要尺寸是相同的值

   \n\n

   \n

   假设的主尺寸是 item\xe2\x80\x99s flex 基本尺寸是根据其最小和最大主尺寸属性夹紧的

   \n

\n

3. 解析灵活长度算法冻结不灵活的弹性项目并将其目标主要尺寸设置为其假设的主要尺寸

   \n\n

   \n

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

   \n

\n

4. 最后，主要尺寸也是该值：

   \n\n

   \n

   将每个项目\xe2\x80\x99s 使用的主尺寸设置为其目标主尺寸。

   \n

\n

\n\n

因此，你的弹性项目的大小应该像它有一样flex-basis: max-content。Chrome、Edge 和 IE 都能正确执行。

\n\n

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

\n\n

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

\n\n

flex-basis: -moz-max-content;\n

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

Chrome 不支持fit-contenton flex-basis，但支持 on width（带前缀）

\n\n

flex-basis: auto;\nwidth: -webkit-fit-content;\nwidth: fit-content;\n

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n