Блог

Внутри таблицы, использующей автоматическую компоновку, у меня есть столбец, содержащий гибкий блок, дочерние элементы которого я не хочу сжимать:

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

Чего я ожидаю, так это того, что гибкий блок не будет сжиматься, по крайней мере, до тех пор, пока другой столбец таблицы может сжиматься дальше. Вместо этого я вижу (по крайней мере, в Chromium и Firefox), что гибкий блок более узкий, чем его содержимое, в результате чего части его содержимого переполняют ячейку таблицы, несмотря на то, что другой столбец таблицы имеет большой потенциал для дальнейшего сокращения.

Что я обнаружил, так это то, что присвоение width: max-content гибкому блоку, по-видимому, устраняет проблему в этом случае. Это работает даже без flex-shrink использования стилей. Интересно, что с width: min-content I я вижу то же поведение, что и с таблицей:

 <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-content или white-space: nowrap , в более сложном случае, когда я хочу поместить сложную гибкую компоновку внутри столбца таблицы с некоторыми элементами, уменьшающимися, а другие — нет, это обходное решение не сработает. Итак, я хотел бы разобраться в этом: есть ли правильный способ установить ширину гибкого блока на минимальную ширину его элементов? Является ли поведение, которое я вижу, ошибкой браузера, или оно соответствует стандарту CSS?

Похоже, что поведение как в Firefox, так и в Chromium на самом деле неправильное.

Я сообщил об этом как об ошибке в Chromium и Firefox.