为什么弹性项目不能缩小到超过内容大小？

Question

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

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

（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）

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

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

Answer 1

弹性物料的自动最小尺寸

您遇到了flexbox默认设置。

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

默认值为…

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

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

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

• min-width: 0
• min-height: 0
• overflow: hidden（或其他任何值，除外visible）

Flexbox规格

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

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

关于auto价值…

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

换一种说法：

• 在min-width: auto和min-height: auto违约时才适用overflow的visible。
• 如果overflow值不是visible，则min-size属性的值为0。
• 因此，overflow: hidden可以代替min-width: 0和min-height: 0。

和…

• 最小尺寸算法仅适用于主轴。
• 例如，min-height: auto默认情况下，行方向容器中的flex项目不会获得。
• 有关更详细的说明，请参阅此帖子：
• 最小宽度渲染在flex-direction：行和flex-direction：列上有所不同

您已应用min-width：0，但项目仍然没有缩小？

嵌套式弹性容器

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

基本上，带有的较高级别的柔韧性商品min-width: auto可以防止嵌套在下方的商品收缩min-width: 0。

浏览器渲染说明

• Chrome与Firefox / Edge

从2017年开始，Chrome似乎（1）恢复为min-width:0/min-height:0默认值，或者（2）0在某些情况下根据神秘算法自动应用默认值。结果，这就是他们所说的一种干预。）因此，许多人看到他们的布局（特别是所需的滚动条）在Chrome中工作正常，但在Firefox /Edge中却没有。

• IE11

正如规范所指出的，auto对价值min-width和min-height性质是“新”。这意味着某些浏览器可能仍0默认情况下呈现值，因为它们在值更新之前实现了flex布局0，min-width并且min-height是CSS2.1中和的初始值

修改后的演示

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