Как заставить деление на равные части с помощью 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.

Ответ 1

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

flex-basis: 0;

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

img {
  max-width: 100%;
  height: auto;
}

Ответ 2

Чтобы добиться равного распределения, вы должны добавить width: 0 ко всем элементам flex. Это пришло мне в голову после прочтения статьи Мануэля Матузовича, в которой очень хорошо дано глубокое заключение о том, как работает flex-grow.

https://css-tricks.com/flex-grow-is-weird/