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

@H_502_1@我有这个布局：

@H_502_1@> A row flex container,带有definite size,例如宽度：175px
> A flex item

@H_502_1@>使用indefinite flex-basis,例如flex-basis: content
>哪个不灵活,例如flex: none.
>其中max-content size大于available space
> min-content size小于available space

@H_502_1@

.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">


@H_502_1@正如所料,Firefox打破了flex项目中的线条,并将其宽度设置为可用空间.
@H_502_1@
@H_502_1@但是,Chrome不会破坏线条,因此Flex项目会溢出Flex容器：
@H_502_1@
@H_502_1@谁是对的？我怎样才能解决这个问题？


最佳答案
这是发生的事情：
@H_502_1@> Line Length Determination算法确定弹性项目的flex base size是其max-content
@H_502_1@

@H_502_1@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.

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

@H_502_1@The 07009 is the item’s 07001

  clamped according to its min and max main size properties.

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

@H_502_1@Size inflexible items. Freeze,setting its target main size to its

  07009 any item that has a flex factor of zero

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

@H_502_1@Set each item’s used 07005 to its 070013.

@H_502_1@因此,您的弹性项目的大小应该与它具有flex-basis：max-content相同. Chrome,Edge和IE都能正确完成.
@H_502_1@相反,Firefox似乎的大小就好像它具有flex-basis：fit-content. IMO这是更合理的,但它不是标准的. Bug 876985应该解决这个问题.
@H_502_1@同时,要在Firefox上实现标准行为,您可以使用
@H_502_1@
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">

@H_502_1@相反,如果你想要Firefox在其他浏览器上的行为,那就不那么容易了.
@H_502_1@Chrome不支持基于flex的fit-content,但它在宽度上(前缀)
@H_502_1@
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">

@H_502_1@但是,IE / Edge在任何地方都不支持适合内容.但是最大约束应该适用于所有浏览器
@H_502_1@
max-width: 100%;
Box-sizing: border-Box; /* Include paddings and borders */

@H_502_1@请注意,约束不包括边距,因此您可能需要使用calc更正百分比,例如最大宽度：计算(100％ –  6px).
@H_502_1@
.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.f2er.com/css/426956.html

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

猜你在找的CSS相关文章