表格单元格内部的宽度或宽度的弹性框:尽管弹性收缩，最小内容也会收缩:0 [英] Flex box inside table cell or with width: min-content shrinks despite flex-shrink: 0

问题描述

在使用自动布局的表格中，我有一列包含一个弹性框，该弹性框的子项我不希望收缩:

Inside a table using automatic layout, I have a column that contains a flex box whose children I want to not shrink:

<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框比其内容更狭窄，导致其内容的一部分溢出了表格单元格，尽管其他表格列有很大的收缩空间

What I'm expecting is that the flex box will not shrink, at least not as long as the other table column can shrink further. What I'm seeing instead (at least in Chromium and Firefox) is that the flex box is more narrow than its content, causing parts of its content to overflow the table cell, despite the other table column to have a lot of potential to shrink further.

我发现的是，在弹性盒中分配 width:max-content 似乎可以解决问题.这甚至可以在没有 flex-shrink 样式的情况下使用.有趣的是，使用 width:min-content ，我看到与表相同的行为:

What I have discovered is that assigning width: max-content to the flex box seems to fix the problem in this case. This even works without the flex-shrink styles. Interestingly, with width: min-content I see the same behaviour as with the table:

<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 而导致项目没有收缩，但是flex box的宽度似乎是它的项目收缩时(文本会自动换行)的宽度.有趣的是，在弹性框上设置 white-space:nowrap 可以更改此设置，并且弹性框的大小再次与其内容匹配.

The width of the flex box seems to be what it would be if its items were shrinking (and the text would wrap), despite the items not shrinking because of flex-shrink: 0. Interestingly, setting white-space: nowrap on the flex box changes this and the size of the flex box matches its content again.

width:min-content 和表格示例的共同点是，如果防止柔盒的项目收缩，则会错误地计算出柔盒的固有最小宽度.

What seems to be common to both the width: min-content and the table example is that the intrinsic minimum width of the flex box is calculated wrongly if its items are prevented from shrinking.

虽然我可以使用 width:max-content 或 white-space:nowrap 解决此简化示例中的问题，但在更复杂的情况下，想要在表列中放置复杂的flex布局，而某些项目会缩小，而其他项目则不会缩小，因此此解决方法将无法工作.因此，我想深入探讨这一点:是否有适当的方法将flex box的宽度设置为其项目的最小宽度?是我看到浏览器错误的行为，还是遵循CSS标准?

While I am able to solve the problem in this simplified example case using width: max-content or white-space: nowrap, in a more complex case where I want to put a complex flex layout inside a table column with some items shrinking and others not, this workaround will not work. So I would like to get to the bottom of this: Is there a proper way to set the width of a flex box to the minimum width of its items? Is the behaviour that I am seeing a browser bug, or is it following the CSS standard?

推荐答案

似乎Firefox和Chromium中的行为实际上都是错误的.

It seems that the behaviour both in Firefox and in Chromium is actually wrong.

我已将此错误报告为铬并 Firefox .

I have reported this as a bug to Chromium and to Firefox.

这篇关于表格单元格内部的宽度或宽度的弹性框:尽管弹性收缩，最小内容也会收缩:0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！