CSS flexbox Error:flex-growプロパティとflex-based値設定の重要性

レイアウトの際に、以下のような違和感が出てきました.

section 1,2の縦長とsection 4の縦長を同じにするには、flexプロパティを次のように設定します.

/*section1, 2*/

flex: 2 1 auto;


/*section 3*/

flex: 1 1 auto;


/*section 4*/

flex: 4 1 auto;


/*section 5*/

flex: 1 1 auto;

明らかに、親の内容の縦幅は同じなので、flex-grow属性をつかむことができれば、割合はきっと適切だと思ったことがあります.
幼魚類の内容を読んだところ、flex-grow属性の割合で調整すると、実際の箱のwidthやheightも必ずしもちょうどいいとは限らないことが分かった.では、いったいどの属性値を変更するのでしょうか...?
だから私はヘロフィーのブログでflexの関連属性を調べました.
flex-growプロパティを使用しても、flex-basic設定の値のため、幅と高さの比率が予想に合わない場合があります.
flex-basicがautoの場合、ボックス内の内部コンテンツのデフォルトサイズを除いて、残りの高さの割合はflex-growによって調整され、結果は私が予想したのとは異なります.画像で説明すれば、こんなはずです.
△宇奮闘は画板がないのでflex-basicタグをなぜ変なのか?編集)
低い黒い枠で四角形に囲まれた部分を除いて、残りの高さの間の割合をflex-growで調整すると、このような現象が発生します.
flex-basicがautoの場合、ボックスのサイズを調整する前の基本サイズを説明するのは考慮されない問題です.このアトリビュートを0に設定すると、デフォルトのボックス幅や高さはないと考えられますので、flex-growアトリビュートで必要な割合で調整できます...!
実際にauto値を0に変更すると、次の問題を解決できます.