Как заставить деление на равные части с помощью flexbox

В такой структуре:

<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>

с css, указанным как:

#1{
  display: flex;
  flex-direction: row;
}
#2, #4{
  flex: 1;
}

Дивы с id 2 и 4 будут равномерно распределены, если сумма ширины содержимого в id 3 и 5 не превышает ширину dom с id 1.

Когда сумма превышает ширину, они распределяются неравномерно, а одна с более широким контентом будет занимать больше места. Как заставить 2 и 4 брать даже ширину с помощью flexbox даже в таких случаях?

Я не хочу использовать ширину спецификации на проценты. Я хочу придерживаться flexbox.

4b9b3361

Если вы хотите, чтобы элементы расти или уменьшались независимо от содержимого, укажите нуль flex basis:

flex-basis: 0;

Однако мое демо неправильно работает в Chrome: большое изображение растягивает его родительский контейнер независимо от того, установлен ли нулевой базис. В качестве обходного пути можно установить максимальную ширину:

img {
  max-width: 100%;
  height: auto;
}
11
ответ дан 08 июня '13 в 19:39
источник