我有这个布局：
> 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">
