html - 为什么 flex 元素不能缩小到超过内容大小?

原文 标签 html css flexbox

我有4个flexbox列,并且一切正常,但是当我在列中添加一些文本并将其设置为大字体时,由于flex属性,它使列变宽了。

我尝试使用word-break: break-word并提供了帮助,但是当我将列的大小调整为非常小的宽度时,文本中的字母会分成多行(每行一个字母),但是列的宽度不会小于一个字母大小。

观看此video
(开始时,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终遵循flex设置; flex大小为1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助……但是还有其他解决方案吗?

我不能使用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>

最佳答案

弹性物料的自动最小尺寸

您遇到了flexbox默认设置。

伸缩项目不能小于其内容沿主轴的大小。

默认值为...


min-width: auto
min-height: auto


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

您可以通过将弹性项目设置为来覆盖这些默认值:


min-width: 0
min-height: 0
overflow: hidden(或visible以外的任何其他值)




Flexbox规格


  4.5. Automatic Minimum Size of Flex Items
  
  为了为弹性商品提供更合理的默认最小尺寸,
  规范引入了新的auto值作为的初始值
  CSS 2.1中定义的min-widthmin-height属性。


关于auto值...


  在主轴上overflowvisible的伸缩项目上,当在伸缩项目的主轴min-size属性中指定时,指定自动最小尺寸。否则计算为0


换一种说法:


min-width: automin-height: auto默认设置仅在overflowvisible时适用。
如果overflow的值不是visible,则min-size属性的值是0
因此,overflow: hidden可以替代min-width: 0min-height: 0


和...


最小尺寸算法仅适用于主轴。
例如,默认情况下,行方向容器中的flex项目不会获取min-height: auto
有关更详细的说明,请参阅此帖子:


min-width rendering differently in flex-direction: row and flex-direction: column





您已应用min-width:0,但项目仍然没有缩小?

嵌套式弹性容器

如果要在HTML结构的多个级别上处理弹性项目,则可能有必要在较高级别的项目上覆盖默认的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 Chrome
IE11

如规范中所述,automin-width属性的min-height值为“ new”。这意味着某些浏览器在默认情况下仍可能呈现0值,因为它们在值更新之前实现了flex布局,并且因为0CSS 2.1min-widthmin-height的初始值。 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>





jsFiddle

关于html - 为什么 flex 元素不能缩小到超过内容大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55152291/

相关文章:

caching - 延迟 HTTP 缓存

html - 如果单击,则为事件类提供事件,直到单击另一个元素,然后为第二个元素提供事件类,并从第一个元素中移除事件类

html - 如何使 div 高度达到其父级的 100%?

jquery - 使用CSS反转动画

css - 使 flexbox div 垂直包裹内容

html - 对齐内容 : center does not work in IE11

javascript - 未捕获的类型不匹配错误 : Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

javascript - 如何在单击表格中的按钮时添加动态行?

css - 更改每个第二,第三和第四元素的背景颜色?

javascript - AngularJS Material 布局 - flex 问题