我有 4 个 flexbox 列,一切正常,但是当我向列中添加一些文本并将其设置为大字体时,由于 flex 属性,列变得比应有的更宽。
我尝试使用 word-break: break-word
并且它有所帮助,但是当我将列的大小调整为非常小的宽度时,文本中的字母被分成多行(一个字母每行),但该列的宽度不会小于一个字母大小。
看这个video (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终尊重 flex 设置; flex 尺寸 1 : 3 : 4 : 4)
我知道,将 font-size 和 column padding 设置得更小会有所帮助...但是还有其他解决方案吗?
我不能使用overflow-x: hidden
。
.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>
最佳答案
flex 元素的自动最小尺寸
您遇到了 flexbox 默认设置。
flex 元素不能小于其内容沿主轴的大小。
默认是...
最小宽度:自动
最小高度:自动
...分别用于行方向和列方向的 flex 元素。
您可以通过将 flex 元素设置为以下方式来覆盖这些默认值:
最小宽度:0
最小高度:0
溢出:隐藏
(或任何其他值,visible
除外)
Flexbox 规范
4.5. Automatic Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new
auto
value as the initial value of themin-width
andmin-height
properties defined in CSS 2.1.
关于 auto
值...
On a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to0
.
换句话说:
min-width: auto
和min-height: auto
默认值仅在overflow
可见
时适用.- 如果
overflow
值不是visible
,则 min-size 属性的值为0
。 - 因此,
overflow: hidden
可以替代min-width: 0
和min-height: 0
。
和...
- 最小尺寸算法仅适用于主轴。
- 例如,行方向容器中的 flex 元素在默认情况下不会获得
min-height: auto
。 - 有关更详细的说明,请参阅此帖子:
你已经应用了 min-width: 0 并且元素仍然没有收缩?
嵌套 Flex 容器
如果您在 HTML 结构的多个级别上处理 flex 元素,可能需要覆盖默认的 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 ChromeIE11
如规范中所述,
min-width
和min-height
属性的auto
值为"new"。这意味着某些浏览器可能仍默认呈现0
值,因为它们在值更新之前实现了 flex 布局,并且因为0
是min 的初始值-width
和min-height
在 CSS 2.1 中。 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>
关于html - 为什么 flex 元素不缩小过去的内容大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40384438/