代码之家 › 专栏 › 技术社区 › cbdeveloper

嵌套flex容器存在问题。内部容器的项不考虑其父项的宽度

flexbox reactjs css html javascript

cbdeveloper · 技术社区 · 6 年前

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

0 回复 | 直到 7 年前

Eve 4 年前

Flex项目的自动最小大小

您遇到了flexbox默认设置。

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

默认值是。。。

min-width: auto
min-height: auto

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

您可以通过将flex项设置为:

min-width: 0
min-height: 0
overflow: hidden (或任何其他价值,但 visible )

Flexbox规范

4.5. Automatic Minimum Size of Flex Items

为了为弹性物品提供更合理的默认最小尺寸,以下规范引入了一种新的 auto 值作为这个 min-width 和 min-height CSS 2.1中定义的属性。

关于 汽车 价值

在弹性物品上 overflow 是 看得见的 在主轴中,当在“柔性项目主轴最小尺寸”属性中指定时,指定 自动最小尺寸 .否则会计算为 0 .

换句话说:

这个 最小宽度:自动 和 最小高度:自动 默认值仅在以下情况下适用 溢流 是 看得见的 .
如果 溢流 价值不是 看得见的 ,最小大小属性的值为 0 .
因此 溢出:隐藏 可以替代 最小宽度:0 和 最小高度:0 .

和

最小尺寸算法仅适用于主轴。
例如,行方向容器中的弹性项不会 最小高度:自动 默认情况下。
有关更详细的解释,请参阅本文:
- min-width rendering differently in flex-direction: row and flex-direction: column

你已经应用了最小宽度:0,但物品仍然没有缩小?

嵌套Flex容器

如果要在HTML结构的多个级别上处理flex项,可能需要覆盖默认值 最小宽度:自动 / 最小高度:自动 在更高级别的项目上。

基本上,更高级别的弹性物品可以防止下面嵌套的项目收缩 最小宽度:0 .

例如:

浏览器呈现注释

Chrome vs.Firefox/Edge

至少从2017年开始,Chrome似乎正在(1)回归到 最小宽度:0 / 最小高度:0 默认值,或(2)自动应用 0 基于神秘算法的特定情况下的默认值。(这可能就是他们所说的 intervention )因此,许多人看到他们的布局(尤其是所需的滚动条)在Chrome中按预期工作,但在Firefox/Edge中却没有。下面将更详细地介绍这个问题: flex-shrink discrepancy between Firefox and Chrome
IE11

如规范中所述 汽车 价值观 最小宽度 和 最小高度 房产是“新的”。这意味着一些浏览器仍然可以呈现 0 默认值,因为他们在值更新之前实现了flex布局,并且 0 是的初始值 最小宽度 和 最小高度 在里面 CSS 2.1 . One such browser is IE11. 其他浏览器已更新到更新版本 汽车 中定义的值 flexbox spec .

修订版演示

.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