ボックス内容量にもかかわらず2x2グリッドの等高さ

Question

コンテンツの量にかかわらず4つのボックス（赤、青、緑、黄色）の高さがすべて等しい2x2グリッドを作成しようとしています。

#rowTwo { 
 
    background-color: pink; 
 
    min-height: 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
#grid2x2 { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    background-color: orange; 
 
    width: 80%; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-basis: calc(50% - 20px); 
 
    margin: 5px; 
 
    justify-content: center; 
 
    padding-top: 5%; 
 
    overflow: hidden; 
 
}

<div id={styles.rowTwo}> 
 
    <Heading title="My Title"/> 
 
    <div id={styles.grid2x2}> 
 
    <div id={styles.boxOne} className={styles.box}> 
 
     <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[0]}/> 
 
    </div> 
 
    <div id={styles.boxTwo} className={styles.box}> 
 
     <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[1]}/> 
 
    </div> 
 
    <div id={styles.boxThree} className={styles.box}> 
 
     <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[2]}/> 
 
    </div> 
 
    <div id={styles.boxFour} className={styles.box}> 
 
     <DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[3]}/> 
 
    </div> 
 
    </div> 
 
</div>

Iが直面する問題は、ボックスは、行の最大含有量の高さに展開することです。ここで

は私の問題を概説画像です：

誰もが私はこれを達成できる方法を知っているだろうか？

Answer 1

CSSでこれを行うには、padding-topを使用して高さを追加し、絶対的な配置を使用してこのパディングの上にコンテンツを描画します。ここで

は一例です：https://codepen.io/anon/pen/xpwooz

#grid2x2 { 
    display: flex; 
    flex-wrap: wrap; 
    background-color: orange; 
} 

.box { 
    display: flex; 
    flex-basis: calc(50% - 20px); 
    margin: 5px; 
    justify-content: center; 
    overflow: hidden; 
    background: red; 
    padding-top: 100px; 
    position: relative; 
} 

.content { 
    position: absolute; 
    background: green; 
    top: 0; 
    width: 100%; 
}  

問題は、あなたが動的コンテンツの高さに基づいて、この高さを変更することはできませんです。固定サイズに設定するか、パーセンテージに設定して、親の幅に基づいてサイズを変更することができます。最大のコンテンツ要素に基づいて高さを変更するには、javascriptを使用する必要があると思います。