2x2 Grid equal height despite box content amount - html

Question

I am trying to create a 2x2 grid where the height of the four individual boxes (red, blue, green, yellow) are all equal despite how much content they contain.
#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>
The issue I face is that a box expands to the height of the largest content in a row.
Here is an image outlining my problem:
Would anyone know how I could achieve this?

Answer 1

You can do this in CSS by using padding-top to add the height and then absolute positioning to draw your content on top of this padding.
Here is an example: 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%;
}
The problem is you can't change this height dynamically based on the content height. You can either set it to a fixed size or set it to a percentage and have it change size based on it's parents width. I think you'll need to use javascript if you want the height to change based on the largest content element.