为什么不弹性项目缩小过去的内容大小？ [英] 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


• （或任何其他值，除可见）



---

4.5。自动弹性最小尺寸
项目

为了提供一个更合理的弹性项目的默认最小尺寸，这
规范引入了一个新的 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 。


• 更详细的解释参见这篇文章：
  
  
  
  
  • 最小宽度渲染在弯曲方向上不同：行和弯曲方向：列< a>
  
  

---

已应用min-width：0并且该项目仍然不收缩？

嵌套的Flex容器
$ b

如果您正在处理HTML结构的多个级别上的flex项目，则可能需要覆盖默认的 min-width：auto / min-height：auto 。

基本上， c> min-width：auto 可以防止用 min-width：0 嵌套的项目缩小。

示例：

• Flex项目的缩小比内容小 将孩子融入家长


• 白色空间css属性正在创建问题使用flex

---

浏览器渲染注释

• Chrome与Firefox / Edge

  
  
  

  ，看起来Chrome是（1）回到 min-width：0 / min-height：0 默认值，或（2）在某些情况下基于神秘算法自动应用 0 默认值。 （这可能是他们所说的 干预 ）。结果，许多人人们看到他们的布局（特别是期望的滚动条）在Chrome中按预期工作，但在Firefox / Edge中无法正常工作。这个问题在这里有更详细的介绍： Firefox和Chrome之间的flex-shrink差异




• IE11

  
  
  

  正如该规范所述， 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 。

/ h3>



.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
$ b

jsFiddle




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 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.

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 overflow-x: hidden.

JSFiddle: https://jsfiddle.net/78h8wv4o/3/

.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

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...

• min-width: auto
• min-height: auto

...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
• 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 the min-width and min-height properties defined in CSS 2.1.

With regard to the auto value...

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

In other words:

• The min-width: auto and min-height: auto defaults apply only when overflow is visible.
• If the overflow value is not visible, the value of the min-size property is 0.
• Hence, overflow: hidden can be a substitute for min-width: 0 and min-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:
  • min-width rendering differently in flex-direction: row and flex-direction: column

---

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 the 0 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 Chrome

• IE11

  As noted in the spec, the auto value for the min-width and min-height properties is "new". This means that some browsers may still render a 0 value by default, because they implemented flex layout before the value was updated and because 0 is the initial value for min-width and min-height in CSS 2.1. One such browser is IE11. Other browsers have updated to the newer auto 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>

jsFiddle

这篇关于为什么不弹性项目缩小过去的内容大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！