html - フレックスボックスを使用して均等に分割する方法

Question

このような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;
}

ID 2 と 4 の div は、ID 3 と 5 のコンテンツの幅の合計が ID 1 の dom の幅を超えない限り、均等に分散されます。

合計が幅を超えると、それらは均等に分散されず、より広いコンテンツを持つものはより多くの幅を占有します。そのような場合でも、フレックスボックスを使用して 2 と 4 を均等な幅にするにはどうすればよいですか?

パーセントによる幅指定は使いたくありません。フレックスボックスにこだわりたい

Answer 1

要素をそのコンテンツに依存せずに拡大または縮小する場合は、ゼロフレックス ベースを指定します。

flex-basis: 0;

ただし、私のデモは Chrome で正しく動作しません。ゼロ基準が設定されていても、大きな画像は親コンテナーを引き伸ばします。回避策として、最大幅を設定できます。

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