子divをフレックス親と同じ高さにする方法

Question

お互いに同じ高さと親divとして3つの子divが必要です。 1つのdivの内容は、ユーザーとのやりとりの際に変更されるように設定されています。これにより高さが変化すると、親や他の子の高さやその両方が増加するはずです。フレックスでこれが可能だと思った。

私は同じ質問に答えを実装しようとしましたが、これまでのところ運がありません。誰でも私が間違っていることを見つけることができますか？私はFirefoxを使用していますので、このプロトタイプ版では他のブラウザでも動作する必要はありませんが、後で時間を節約できます。

私は 'position：absolute'と 'display：table'を長きにわたって楽しんでいませんでした。とにかく、フレックスアプローチが本当に好きでしょうか。ここ

div#filterRow { 
 
    min-height: 80px; 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
div#filterRow div.selectHolder { 
 
    border: 2px solid blue; 
 
    border-right: 0; 
 
    flex: auto; 
 
    height: 100%; 
 
    padding: 10px; 
 
} 
 

 
div#filterRow div.selectHolder div { 
 
    vertical-align: top; 
 
} 
 

 
div#filterRow div.selectHolder:last-child { 
 
    border-right: 1px solid lightgray; 
 
} 
 

 
div#filterRow div h1 { 
 
    margin: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
div#filterRow div div { 
 
    margin-right: 5px; 
 
} 
 

 
div#filterRow div#filters { 
 
    width: 800px; 
 
} 
 

 
div#filterRow div#highlight { 
 
    width: 300px; 
 
} 
 

 
div#filterRow div#granularity { 
 
    width: 400px; 
 
} 
 

 
div.fullwidth { 
 
    width: 100%; 
 
}

<div class="fullwidth dispTR" id="filterRow"> 
 

 
    <div class="selectHolder" id="filters"> 
 
    <h1>Filters longer to make tall</h1> 
 
    </div> 
 
    <div class="selectHolder" id="highlight"> 
 
    <h1>Highlight</h1> 
 
    </div> 
 
    <div class="selectHolder" id="granularity"> 
 
    <h1>Group</h1> 
 
    </div> 
 
</div>

例：任意の助けhttps://jsfiddle.net/rt80wd6r/2/

グレイトフル。私はそれが明らかなものだと確信しています。 display: flex;要素の子要素は、デフォルトでは親の高さを取り上げる

HTML5 flexible box model height calculation

make div's height expand with its content

Answer 1

：ここ

は他の質問です。だからheight: 100%;または類似の必要はありません。

div#filterRow { 
 
    min-height: 80px; 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
div#filterRow div.selectHolder { 
 
    border: 2px solid blue; 
 
    border-right: 0; 
 
    padding: 10px; 
 
} 
 

 
div#filterRow div.selectHolder div { 
 
    vertical-align: top; 
 
} 
 

 
div#filterRow div.selectHolder:last-child { 
 
    border-right: 1px solid lightgray; 
 
} 
 

 
div#filterRow div h1 { 
 
    margin: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
div#filterRow div div { 
 
    margin-right: 5px; 
 
} 
 

 
div#filterRow div#filters { 
 
    width: 800px; 
 
} 
 

 
div#filterRow div#highlight { 
 
    width: 300px; 
 
} 
 

 
div#filterRow div#granularity { 
 
    width: 400px; 
 
} 
 

 
div.fullwidth { 
 
    width: 100%; 
 
}

<div class="dispTR" id="filterRow"> 
 

 
    <div class="selectHolder" id="filters"> 
 
    <h2>Filters longer to make tall</h2> 
 
    <p> 
 
     Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel. 
 
    </p> 
 
    </div> 
 
    <div class="selectHolder" id="highlight"> 
 
    <h2>Highlight</h2> 
 
    </div> 
 
    <div class="selectHolder" id="granularity"> 
 
    <h2>Group</h2> 
 
    </div> 
 
    
 
</div>

Answer 2

使用align-items: stretchフレックスコンテナに、子項目（height: 100%）で明示的な高さを取り除きます。 FYI方法フレックス作品

https://jsfiddle.net/rt80wd6r/3/

は、水平および垂直デフォルトで、アイテムを整列させるための2つの軸を提供する（ただし、第二である垂直有する最初の一つであると水平に反転させることができる）ということです。

第一軸がjustify-contentで設定され、第二は、align-itemsに設定されている - ので、この場合には、我々は、縦軸上のアイテムを伸ばしたいので、私たちはalign-itemsを使用しています。

編集：もう1つの答えには、デフォルトで既にalign-items: stretchが設定されていると言われているので、より最適なものとして受け入れる必要があります。