Html 为什么不'；t flex项目缩小到超过内容大小？_Html_Css_Flexbox

Html 为什么不'；t flex项目缩小到超过内容大小？

html css

Html 为什么不'；t flex项目缩小到超过内容大小？,html,css,flexbox,Html,Css,Flexbox,我有4个flexbox列，一切正常，但当我向列中添加一些文本并将其设置为大字体时，由于flex属性，这会使列的宽度超出应有的范围我试着使用wordbreak:break word，这很有帮助，但当我将列的大小调整到非常小的宽度时，文本中的字母会被分成多行（每行一个字母），而列的宽度不会小于一个字母的大小看这个（开始时，第一列是最小的，但当我调整窗口大小时，它是最宽的列。我只想始终遵守flex设置；flex大小1:3:4:4）我知道，将字体大小和列填充设置为较小将有助于。。。但还有其他解决

我有4个flexbox列，一切正常，但当我向列中添加一些文本并将其设置为大字体时，由于flex属性，这会使列的宽度超出应有的范围

我试着使用

wordbreak:break word

，这很有帮助，但当我将列的大小调整到非常小的宽度时，文本中的字母会被分成多行（每行一个字母），而列的宽度不会小于一个字母的大小

看这个（开始时，第一列是最小的，但当我调整窗口大小时，它是最宽的列。我只想始终遵守flex设置；flex大小1:3:4:4）

我知道，将字体大小和列填充设置为较小将有助于。。。但还有其他解决办法吗

我无法使用

溢出-x:hidden

.container{
显示器：flex；
宽度：100%
}
上校{
最小高度：200px；
填充：30px；
断字：断字
}
.col1{
弹性：1；
背景：橙色；
字号：80px
}
.col2{
弹性：3；
背景：黄色
}
.col3{
弹性：4；
背景：天蓝色
}
.col4{
弹性：4；
背景：红色
}


同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇

弹性物品的自动最小尺寸您遇到了flexbox默认设置

弹性项不能小于其沿主轴的内容大小

默认值是

```
最小宽度：自动
```
```
最小高度：自动
```

…分别用于行方向和列方向的弹性项

您可以通过将flex项设置为：

```
最小宽度：0
```
```
最小高度：0
```
```
溢出：隐藏的
```
（或任何其他值，除了可见的）

Flexbox规范

为了为flex项目提供更合理的默认最小尺寸，此规范引入了一个新的

auto

值作为 CSS 2.1中定义的

min-width

和

min-height

属性

关于

auto

值

在其

溢出

在主轴上可见的弹性项目上，当在弹性项目的主轴最小尺寸属性上指定时，指定自动最小尺寸。否则将计算为

换言之：

```
min-width:auto
```
和
```
min-height:auto
```
默认值仅在
```
overflow
```
可见时适用
如果
```
溢出
```
值不可见，则最小大小属性的值为
```
0
```
因此，
```
overflow:hidden
```
可以替代
```
minwidth:0
```
和
```
minheight:0
```

而且

最小尺寸算法仅适用于主轴
例如，行方向容器中的弹性项在默认情况下不会获得
```
min height:auto
```
有关更详细的说明，请参阅本帖：

您已应用最小宽度：0，但该项仍不收缩？嵌套Flex容器

如果在HTML结构的多个级别上处理flex项，可能需要在更高级别的项上覆盖默认的

min-width:auto

min-height:auto

基本上，具有

min-width:auto

的更高级别弹性项可以防止嵌套在以下具有

min-width:0

的项上的收缩

示例：

浏览器渲染注释

Chrome与Firefox/Edge
至少从2017年开始，Chrome似乎（1）恢复到
```
最小宽度：0
```
/
```
最小高度：0
```
默认值，或者（2）基于神秘算法在某些情况下自动应用
```
0
```
默认值。（这可能就是他们所说的一个。）因此，许多人看到他们的布局（尤其是所需的滚动条）在Chrome中的效果与预期一致，但在Firefox/Edge中却没有。此处将更详细地介绍此问题：
IE11
如规范中所述，
```
minwidth
```
和
```
minheight
```
属性的
```
auto
```
值为“新”。这意味着某些浏览器在默认情况下仍可能呈现
```
0
```
值，因为它们在值更新之前实现了flex布局，并且
```
0
```
是中
```
min width
```
和
```
min height
```
的初始值。其他浏览器已更新为中定义的较新的
```
auto
```
值

修订版演示

.container{
显示器：flex；
}
上校{
最小高度：200px；
填充：30px；
断字：断字
}
.col1{
弹性：1；
背景：橙色；
字号：80px；
最小宽度：0；/*新*/
}
.col2{
弹性：3；
背景：黄色
}
.col3{
弹性：4；
背景：天蓝色
}
.col4{
弹性：4；
背景：红色
}


同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇