为什么不弹性项目缩小过去的内容大小? [英] Why don't flex items shrink past content size?
问题描述
我有4个flexbox列,一切正常,但是当我向列中添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使列宽度比应该大。
我尝试使用 word-break:break-word
并且它有帮助,但仍然当我调整列的大小时小宽度,文本中的字母被分成多行(每行一个字母),但列的宽度不会小于一个字母。
观看此视频: http:// screencast-o-matic.com/watch/cDetln1tyT
(在开始时,第一列是最小的,但是当我调整窗口大小时,它是最宽的列,我只是想尊重flex设置始终;弹性尺寸1:3:4:4)我知道,将字体大小和列填充设置为较小将有助于...但还有其他解决方案?
我无法使用 overflow-x:hidden
。
JSFiddle: https://jsfiddle.net/78h8wv4o/3/
.container {display:flex; width:100%}。col {min-height:200px;填充:30px; word break:break-word} .col1 {flex:1;背景:橙色; font-size:80px} .col2 {flex:3;背景:黄色} .col3 {flex:4;背景:skyblue} .col4 {flex:4;背景: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>
b $ b
Flex项目的自动最小大小
您遇到flexbox默认设置。
Flex项目的长度不能小于沿着主轴的内容大小。
默认值为...
-
min-width:auto
-
min-height:auto
您可以通过将弹性项目设置为:
来覆盖这些默认值。-
最小宽度:0
-
(或任何其他值,除
可见
)
为了提供一个更合理的弹性项目的默认最小尺寸,这
规范引入了一个新的auto
值作为初始值
min-width
和min-height
在CSS 2.1中定义的属性。
关于 auto
value ...
当在Flex项目的主轴min-size属性上指定时,主轴上的$ c> overflow 为
visible
,指定一个自动最小尺寸。它另外计算为0
。
换句话说:
-
min-width:auto
和min-height:auto
默认仅适用于溢出
<可见。 - 如果
溢出
值不是可见
,则min-size属性的值是0
。 - 因此,
overflow:hidden
可以代替min -width:0
和min-height:0
。
和...
- 最小尺寸算法仅适用于主轴。
- 例如,默认情况下,行方向容器中的flex项目不会获得
min-height:auto
。
- 更详细的解释参见这篇文章:
- 例如,默认情况下,行方向容器中的flex项目不会获得
已应用min-width:0并且该项目仍然不收缩?
嵌套的Flex容器
$ b
如果您正在处理HTML结构的多个级别上的flex项目,则可能需要覆盖默认的 min-width:auto
/ min-height:auto
。
基本上, c> min-width:auto 可以防止用 min-width:0
嵌套的项目缩小。
示例: Chrome与Firefox / Edge ,看起来Chrome是(1)回到 IE11 正如该规范所述, I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property. I tried to use Watch this video: http://screencast-o-matic.com/watch/cDetln1tyT
(at the start, the first column is the smallest, but when I resized the window, it is the widest column. I just want to respect flex settings always; flex sizes 1 : 3 : 4 : 4) I know, setting font-size and column padding to smaller will help... but is there any other solution? I can not use JSFiddle: https://jsfiddle.net/78h8wv4o/3/
You're encountering a flexbox default setting. A flex item cannot be smaller than the size of its content along the main axis. The defaults are... ...for flex items in row-direction and column-direction, respectively. You can override these defaults by setting flex items to:
浏览器渲染注释
min-width:0
/ min-height:0
默认值,或(2)在某些情况下基于神秘算法自动应用 0
默认值。 (这可能是他们所说的 干预 )。结果,许多人人们看到他们的布局(特别是期望的滚动条)在Chrome中按预期工作,但在Firefox / Edge中无法正常工作。这个问题在这里有更详细的介绍: Firefox和Chrome之间的flex-shrink差异
auto
min-width 和 min-height
属性的$ c>值为new。这意味着某些浏览器默认情况下仍然可以呈现 0
值,因为它们在更新值之前实现了flex布局,并且因为 0
是中 min-width
和 min-height
的初始值。 /www.w3.org/TR/CSS2/visudet.html#min-max-widthsrel =noreferrer> CSS 2.1 。 其中一个浏览器是IE11。其他浏览器已更新为新的 auto
的值在 flexbox spec 。
.container {display:flex;}。col { min-height:200px;填充:30px; word break:break-word} .col1 {flex:1;背景:橙色; font-size:80px;最小宽度:0; / * NEW * /}。col2 {flex:3;背景:黄色} .col3 {flex:4;背景:skyblue} .col4 {flex:4;背景: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>
$ b word-break: break-word
and it helped, but still when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line), and yet the column does not get smaller width than one letter size. 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>
The Automatic Minimum Size of Flex Items
min-width: auto
min-height: auto
min-width: 0
min-height: 0
overflow: hidden
(or any other value, except visible
)
Flexbox Specification
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.
With regard to the auto
value...
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
.
In other words:
- The
min-width: auto
andmin-height: auto
defaults apply only whenoverflow
isvisible
. - If the
overflow
value is notvisible
, the value of the min-size property is0
. - Hence,
overflow: hidden
can be a substitute formin-width: 0
andmin-height: 0
.
and...
- The minimum sizing algorithm applies only on the main axis.
- For example, a flex item in a row-direction container does not get
min-height: auto
by default. - For a more detailed explanation see this post:
You've applied min-width: 0 and the item still doesn't shrink?
Nested Flex Containers
If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto
/ min-height: auto
on items at higher levels.
Basically, a higher level flex item with min-width: auto
can prevent shrinking on items nested below with min-width: 0
.
Examples:
- Flex item is not shrinking smaller than its content
- Fitting child into parent
- white-space css property is creating issues with flex
Browser Rendering Notes
Chrome vs. Firefox / Edge
Since at least 2017, it appears that Chrome is either (1) reverting back to the
min-width: 0
/min-height: 0
defaults, or (2) automatically applying the0
defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and ChromeIE11
As noted in the spec, the
auto
value for themin-width
andmin-height
properties is "new". This means that some browsers may still render a0
value by default, because they implemented flex layout before the value was updated and because0
is the initial value formin-width
andmin-height
in CSS 2.1. One such browser is IE11. Other browsers have updated to the newerauto
value as defined in the flexbox spec.
Revised Demo
.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>
这篇关于为什么不弹性项目缩小过去的内容大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!