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

в структуре dom, как это:

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

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

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

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

9
css css3 flexbox html

1 ответов

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

flex-basis: 0;

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

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