CSSフレックス：フレックス行の等高さを取得する方法

Question

同じ列の高さでフレックスレイアウトを取得するにはいくつかの困難があります。いくつかの行（.flex-row）を含むコンテナ（.row-container）があります。これらの行には、異なる長さの内容が含まれています。すべての行の高さを同じにしたい。私のフレックスの理解が進む限り、子供のflex: displayとflex-directionを親（.row-container）とflex-grow: 1に設定する必要があります（.flex-row）。ただし、行の高さは同じではありません。jsfiddleを参照してください。どのようにこの作品を作るためのアイデア（そしておそらく説明）？

.row-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    width: 75%; 
 
    border: 1px solid blue; 
 
} 
 

 
.flex-row { 
 
    border: 1px solid black; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    background-color: yellow; 
 
    align-items: center; 
 
} 
 

 
.col-wrapper {} 
 

 
.col-1, 
 
.col-2 { 
 
    border: 1px solid green; 
 
} 
 

 
.col-right { 
 
    padding-left: 10px; 
 
}

<div class="some-div"> 
 
    <div class="row-container"> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">X</div> 
 
     <div class="col-2">some content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">XXX</div> 
 
     <div class="col-2">some longer content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">aa ab</div> 
 
     <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

（注：私のアプリケーションでは、私もrow-containerにいくつかの "コラムたわみ" を行う。このコードは、フレックスセンタリングから離れて省略されている。）

Answer 1

flex-grow作品のこの方法のうちオーバーフローする可能性：それは利用可能なスペースと競合製品を取ります（widthまたはheightの場合はの値を取ります。現在の場合はflex-direction: columnのためheightです）。現在のケースでは、flex-basisはがalsoなのでautoです。 flex-basisの適用後に空き領域が残らない場合は、flex-growは機能しません。

ここにいくつかのオプションがあります：height: 0を設定するか、flex-basis: 0と設定します。また、min-height: 0が必要な場合もあります（min-height: autoはflex-itemがそのコンテンツを占有できないことがあるためです）。

デモ：

.row-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    width: 75%; 
 
    border: 1px solid blue; 
 
} 
 

 
.flex-row { 
 
    border: 1px solid black; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    /* or height: 0; */ 
 
    /* if needed add min-height: 0; */ 
 
    display: flex; 
 
    background-color: yellow; 
 
    align-items: center; 
 
} 
 

 
.col-1, 
 
.col-2 { 
 
    border: 1px solid green; 
 
} 
 

 
.col-right { 
 
    padding-left: 10px; 
 
}

<div class="some-div"> 
 
    <div class="row-container"> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">X</div> 
 
     <div class="col-2">some content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">XXX</div> 
 
     <div class="col-2">some longer content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">aa ab</div> 
 
     <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

また、私は、例えば、動作を指定するためにいくつかoverflow値を追加することをお勧めしますoverflow-y: auto、.flex-rowの場合。

Answer 2

.flex-row>*{height:100px;} 何かこのような？すべてflexの項目を設定している

Answer 3

あり奇妙な行動のビットはここにいますが、実際にはその高さであっても、行の上に高さを設定する必要があります0（

.flex-row { 
    height: 0; 
} 

Answer 4

トリックを試してみてください.flex-row）が同じ基線の高さを有し、それらが互いに等しく成長することを可能にする。

.flex-row { 
    flex: 1 0 0; 
} 

多分それは簡単に理解できるようにするため。これにより

.flex-row { 
    flex-grow: 1; 
    flex-basis: 0; 
    flex-shrink: 0; //not needed anyway because you have a base height of 0, so they'll never need to shrink 
} 

を、しかし、あなたは3フレックス行のコンテンツ定義の高さが300pxよりも背が高い場合は、その危険性を実行します - そのあなたのrow-containerの場合、各行は、高さ100pxが与えられますし、コンテンツは.flex-row