css – 应该灵活项目溢出Flex容器而不是破坏线？

我有这个布局：

> A row flex container,带有definite size,例如宽度：175px
> A 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;
}

Box">Box">

正如所料,Firefox打破了flex项目中的线条,并将其宽度设置为可用空间.

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

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

最佳答案

这是发生的事情：

> Line Length Determination算法确定弹性项目的flex base size是其max-content

Size the item into the 07003 using its used 07004 in place of its 07005,treating a value of
content as 07006. […] The 07001 is
the item’s resulting 07005.

>由于没有最小尺寸或最大尺寸约束,因此flex项目的hypothetical main size是相同的值

The 07009 is the item’s 07001
clamped according to its min and max main size properties.

> Resolving Flexible Lengths算法冻结了不灵活的flex项目,并将其target main size设置为hypothetical main size

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

>最后,main size也是这个价值：

Set each item’s used 07005 to its 070013.

因此,您的弹性项目的大小应该与它具有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;
}

Box">Box">

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

Chrome不支持基于flex的fit-content,但它在宽度上(前缀)

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;
}

Box">Box">

但是,IE / Edge在任何地方都不支持适合内容.但是最大约束应该适用于所有浏览器

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;
}

Box">Box">

原文地址：https://www.jb51.cc/css/426956.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。