为什么柔性项目不缩水过内容尺寸

html css flexbox


我有4个flexbox列,一切正常,但当我向一个列中添加一些文字并将其设置为大字体时,由于flex属性的原因,它使该列比应该的宽。

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

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

我知道,将字体大小和列的padding设置为小一点会有帮助...........但是有没有其他的解决办法?

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




Answer 1 Michael Benjamin


弹性项目的自动最小尺寸

你遇到的是flexbox默认设置。

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

默认情况是.....

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

...分别为行向和列向的弹性项目。

您可以通过设置flex项来覆盖这些默认值。

  • min-width: 0
  • min-height: 0
  • overflow: hidden (或任何其他值, visible 除外)

柔性箱规格

4.5。自动伸缩物品的最小尺寸

为了为弹性商品提供更合理的默认最小尺寸,该规范引入了一个新的 auto 值作为CSS 2.1中定义的 min-widthmin-height 属性的初始值。

关于 auto 值...

在柔性项,它的 overflowvisible 的主轴线,当在柔性项的主轴最小尺寸属性指定,指定了一个自动的最小尺寸。否则计算为 0

换句话说。

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

and...


你应用了最小宽度:0,项目还是没有缩小?

嵌套式弹性容器

如果要在HTML结构的多个级别上处理弹性项目,则可能有必要覆盖默认的 min-width: auto / min-height: auto 在较高级别的项目上自动。

基本上,具有 min-width: auto 的更高级别的flex项可以防止 min-width: 0 下面嵌套的项收缩。

Examples:


浏览器渲染注意事项

  • Chrome与Firefox / Edge

    至少从2017年开始,Chrome似乎(1)恢复为 min-width: 0 / min-height: 0 默认值,或者(2)在某些情况下根据神秘算法自动应用 0 默认值。结果,这就是他们所谓的干预。)因此,许多人看到他们的布局(尤其是所需的滚动条)在Chrome中工作正常,但是在Firefox / Edge中却没有。此处更详细地介绍了此问题:Firefox和Chrome之间的flex-shrink差异

  • IE11

    如规范中所述, min-widthmin-height 属性的 auto 值为“ new”。这意味着,一些浏览器可能仍然呈现 0 值由缺省的,因为它们实现柔性布局的值被更新之前和因为 0 为初始值 min-widthmin-heightCSS 2.1IE11就是这样一种浏览器。其他浏览器已更新为flexbox规范中定义的较新的 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