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>

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.

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>

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.

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.

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?

来源：https://stackoverflow.com/questions/65083319/flex-box-inside-table-cell-or-with-width-min-content-shrinks-despite-flex-shrin

标签

css

flexbox