为什么 flex 项目不会缩小超过内容大小? [英] Why don't flex items shrink past content size?

问题描述

我有 4 个 flexbox 列，一切正常，但是当我向列添加一些文本并将其设置为大字体时，由于 flex 属性，它使列比应有的宽度更宽.

我尝试使用 word-break: break-word 并且它有所帮助，但是当我将列调整为非常小的宽度时，文本中的字母被分成多行(一个字母每行)，但该列的宽度不会小于一个字母大小.

观看此视频(一开始，第一列是最小的，但是当我调整窗口大小时，它是最宽的列.我只想始终尊重 flex 设置；flex 大小 1 : 3 : 4 : 4)

我知道，将字体大小和列填充设置得更小会有所帮助...但还有其他解决方案吗?

我不能使用overflow-x: hidden.

JSFiddle

.container {显示:弹性；宽度:100%}.col{最小高度:200px；填充:30px；断词:断词}.col1 {弹性:1；背景:橙色；字体大小:80px}.col2 {弹性:3；背景:黄色}.col3 {弹性:4；背景:天蓝色}.col4 {弹性:4；背景:红色}

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

解决方案

Flex Items 的自动最小尺寸

您遇到了 flexbox 默认设置.

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

默认是...

• 最小宽度:自动
• 最小高度:自动

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

您可以通过将弹性项目设置为:

来覆盖这些默认值

• 最小宽度:0
• 最小高度:0
• 溢出:隐藏(或任何其他值，除了visible)

<小时>

弹性盒规范

<块引用>

4.5.Flex 的自动最小尺寸项目

为了为弹性项目提供更合理的默认最小尺寸，这规范引入了一个新的 auto 值作为初始值CSS 2.1 中定义的 min-width 和 min-height 属性.

关于 auto 值...

<块引用>

在 overflow 在主轴上 visible 的 flex 项目上，当在 flex 项目的主轴 min-size 属性上指定时，指定一个 automatic最小尺寸.否则计算为 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.
• 有关更详细的解释，请参阅此帖子:
  • 在 flex-direction: row 和 flex-direction: column 中的最小宽度呈现不同

<小时>

您已经应用了 min-width: 0 并且项目仍然没有缩小?

嵌套 Flex 容器

如果您在 HTML 结构的多个级别上处理弹性项目，则可能需要覆盖默认的 min-width: auto/min-height: auto 在更高级别的项目上.

基本上，带有 min-width: auto 的更高级别的 flex 项目可以防止在 min-width: 0 嵌套在下面的项目上收缩.

示例:

• Flex 项目不会缩小到小于其内容的大小
• 让孩子适应父母
• 空白 css 属性导致 flex 出现问题

<小时>

浏览器渲染注意事项

• Chrome 与 Firefox/Edge

  至少从 2017 年开始，Chrome 似乎要么 (1) 恢复到 min-width: 0/min-height: 0 默认值，要么 (2) 基于神秘算法在某些情况下自动应用 0 默认值.(这可能就是他们所说的干预.)因此，许多人们看到他们的布局(尤其是所需的滚动条)在 Chrome 中按预期工作，但在 Firefox/Edge 中却没有.此处更详细地介绍了此问题:Firefox 和 Chrome 之间的 flex-shrink 差异

• IE11

  如规范中所述，min-width 和 min-height 属性的 auto 值为新".这意味着某些浏览器可能仍然默认渲染 0 值，因为它们在值更新之前实现了 flex 布局，并且因为 0 是 min 的初始值-width 和 min-height 在 CSS 2.1.一种这样的浏览器是 IE11. 其他浏览器已更新到更新的 flexbox 规范中定义的 auto 值a>.

<小时>

修改后的演示

.container {显示:弹性；}.col{最小高度:200px；填充:30px；断词:断词}.col1 {弹性:1；背景:橙色；字体大小:80px；最小宽度:0；/* 新的 */}.col2 {弹性:3；背景:黄色}.col3 {弹性:4；背景:天蓝色}.col4 {弹性:4；背景:红色}

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

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

.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

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