表格单元格内或宽度为最小内容的弹性框会收缩,尽管弹性收缩为0

  • 本文关键字:单元格 表格 css flexbox
  • 更新时间 :
  • 英文 :


在一个使用自动布局的表中,我有一列包含一个我不想收缩其子项的灵活框:

<table>
<tr>
<td>Very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long content.</td>
<td>
<div style="display: flex; background: #fcc">
<div style="flex-shrink: 0">Test content</div>
<div style="flex-shrink: 0">Test content</div>
<div style="flex-shrink: 0">Test content</div>
</div>
</td>
</tr>
</table>

我所期望的是flex框不会收缩,至少不会收缩到其他表列可以进一步收缩的程度。相反,我看到的(至少在Chromium和Firefox中(是,flex框比其内容更窄,导致其部分内容溢出表单元格,尽管其他表列有很大的潜力进一步缩小。

我发现,将width: max-content分配给flex box似乎可以解决这种情况下的问题。这甚至可以在没有flex-shrink样式的情况下工作。有趣的是,对于width: min-content,我看到了与表相同的行为:

<div style="display: flex; background: #fcc; width: min-content">
<div style="flex-shrink: 0">First column</div>
<div style="flex-shrink: 0">Second column</div>
<div style="flex-shrink: 0">Third column</div>
</div>

尽管项目由于flex-shrink: 0而没有收缩,但如果其项目收缩(并且文本将换行(,则弹性框的宽度似乎是它的宽度。有趣的是,在柔性框上设置white-space: nowrap会改变这一点,并且柔性框的大小将再次与其内容相匹配。

width: min-content和表格示例的共同点似乎是,如果阻止其项目收缩,则弹性框的固有最小宽度计算错误。

虽然我可以使用width: max-contentwhite-space: nowrap来解决这个简化示例中的问题,但在更复杂的情况下,如果我想在表列中放置一个复杂的flex布局,其中一些项目正在收缩,而另一些项目则没有收缩,则此解决方法将不起作用。所以我想了解一下:有没有一种合适的方法可以将柔性盒子的宽度设置为其物品的最小宽度?我看到的行为是浏览器错误,还是遵循CSS标准?

看起来Firefox和Chromium中的行为实际上都是错误的。

我已经向Chromium和Firefox报告了这个错误。

最新更新