我有4个flexbox列,并且一切正常,但是当我在列中添加一些文本并将其设置为大字体时,由于flex属性,它使列变宽了。
我尝试使用word-break: break-word
并提供了帮助,但是当我将列的大小调整为非常小的宽度时,文本中的字母会分成多行(每行一个字母),但是列的宽度不会小于一个字母大小。
观看此video
(开始时,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终遵循flex设置; flex大小为1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助……但是还有其他解决方案吗?
我不能使用overflow-x: hidden
。
JSFiddle
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
最佳答案
弹性物料的自动最小尺寸
您遇到了flexbox默认设置。
伸缩项目不能小于其内容沿主轴的大小。
默认值为...min-width: auto
min-height: auto
...分别用于行方向和列方向的弹性项目。
您可以通过将弹性项目设置为来覆盖这些默认值:min-width: 0
min-height: 0
overflow: hidden
(或visible
以外的任何其他值)
Flexbox规格
4.5. Automatic Minimum Size of Flex Items
为了为弹性商品提供更合理的默认最小尺寸,
规范引入了新的auto
值作为的初始值
CSS 2.1中定义的min-width
和min-height
属性。
关于auto
值...
在主轴上overflow
为visible
的伸缩项目上,当在伸缩项目的主轴min-size属性中指定时,指定自动最小尺寸。否则计算为0
。
换一种说法:min-width: auto
和min-height: auto
默认设置仅在overflow
为visible
时适用。
如果overflow
的值不是visible
,则min-size属性的值是0
。
因此,overflow: hidden
可以替代min-width: 0
和min-height: 0
。
和...
最小尺寸算法仅适用于主轴。
例如,默认情况下,行方向容器中的flex项目不会获取min-height: auto
。
有关更详细的说明,请参阅此帖子:
min-width rendering differently in flex-direction: row and flex-direction: column
您已应用min-width:0,但项目仍然没有缩小?
嵌套式弹性容器
如果要在HTML结构的多个级别上处理弹性项目,则可能有必要在较高级别的项目上覆盖默认的min-width: auto
/ min-height: auto
。
基本上,具有min-width: auto
的较高级别的flex项可以防止在min-width: 0
下方嵌套的项上收缩。
例子:
Flex item is not shrinking smaller than its content
Fitting child into parent
white-space css property is creating issues with flex
浏览器渲染说明
Chrome与Firefox / Edge
从2017年开始,Chrome似乎(1)恢复为min-width: 0
/ min-height: 0
默认值,或者(2)在某些情况下基于神秘算法自动应用0
默认值。结果,这就是他们所说的intervention。)因此,许多人看到他们的布局(特别是所需的滚动条)在Chrome中可以正常工作,但在Firefox / Edge中却不能。此问题在这里更详细地介绍:flex-shrink discrepancy between Firefox and Chrome
IE11
如规范中所述,auto
和min-width
属性的min-height
值为“ new”。这意味着某些浏览器在默认情况下仍可能呈现0
值,因为它们在值更新之前实现了flex布局,并且因为0
是CSS 2.1中min-width
和min-height
的初始值。 One such browser is IE11.其他浏览器已更新为flexbox spec中定义的更新的auto
值。
修改后的演示
.container {
display: flex;
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px;
min-width: 0; /* NEW */
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
jsFiddle
关于html - 为什么 flex 元素不能缩小到超过内容大小?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59788871/