Предположим, что я хочу разделить все пространство гибкого контейнера пропорционально, не учитывая размер содержимого гибкого элемента. Я использую flex-basis: 0px для каждого элемента, чтобы сообщить контейнеру flex о том, как обрабатывать размер каждого элемента гибкости как 0 перед делением пространства контейнера.
Это приведет к появлению трех одинаковых размеров:
<div style="display: flex">
<div style="flex: 1 1 0px">xyz</div>
<div style="flex: 1 1 0px">0123456789</div>
<div style="flex: 1 1 0px">abcdefghijklmnopqrstuvwxyz</div>
</div>
Я считаю, что это работает одинаково как в IE11, так и в Chrome, если контейнер больше содержимого. Мы получаем три коробки одинакового размера, как ожидалось:
Это должно работать точно так же, если контейнер меньше содержимого, так как я говорю контейнеру flex, чем размер содержимого 0px:
<div style="display: flex; width: 400px;">
<div style="flex: 1 1 0px">xyz</div>
<div style="flex: 1 1 0px">0123456789</div>
<div style="flex: 1 1 0px">abcdefghijklmnopqrstuvwxyz</div>
</div>
В IE11 он делает именно то, что я ожидаю:
Однако в Chrome он начинает учитывать размер содержимого, как если бы мы использовали flex-basis: auto, а не 0px.
Здесь планшет, демонстрирующий проблему. Просмотрите его как в IE11, так и в Chrome, чтобы увидеть различные поведения самостоятельно.
Я могу обойти это в Chrome с помощью overflow: hidden, но, вернув эту информацию в свою команду, я хотел бы знать, какое поведение правильное.
Мой вопрос: кто ведет себя корректно здесь, IE11 или Chrome? В соответствии с моим пониманием flex-basis: 0px, я думаю (на удивление) поведение IE11 корректно, обрабатывая все пространство, как в контейнере, как гибко, независимо от размера содержимого элемента (точнее, обрабатывая содержимое элемента как размер 0px по мере его запроса).