keeping the depth of a div responsive - html

Question

I have tried adapting this post and its alistapart links. But I can't get my three blocks in a container to act responsively and maintain their aspect ratio
<div class="hpGridTopRow">
<span class="hpBox lightBlue one">
<p class="hbBoxesp">New to Restore</p>
</span>
<span class="hpBox green two">
<p class="hbBoxesp">Events</p>
</span>
<span class="hpBox midBlue three">
<p class="hbBoxesp">Talks</p>
</span>
</div>
I need them to arrange themselves to the borders of the hpGridTopRow div so I am using flex - and its working well.
However, the layout has to be responsive - the aspect ratio of the containers needs to stay fixed as their widths change.
Here's the css
.hpGridTopRow,
.hpGridBottomRow {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
position: relative;
padding-bottom: 20%;
height: 0;
overflow:hidden;
background:yellow;
}
.hpBox {
width:24.18803418803419%;
text-align:center;
height:264px;
height:100%;
}
.hpBox.one {
width:49.4017094017094%;
}
.lightBlue {
background:#15b2d2;
}
.green {
background:#8cc63f;
}
.midBlue {
background:#6a8aa8;
}
.hbBoxesp {
color:#fff;
margin-top:40px;
}
I have created a jsfiddle - as you can the container background shows, but not the actual boxes and said container is behaving responsively.
How can I get the spans to behave properly?

Answer 1

I've removed those extra colors and simplified the percentages to simplify the code.
The idea is that I've added position: relative; to the parent and position: absolute; to the children. This ensures that the children positions are bounded to the parent.
I've also added top: 0; bottom: 0; to the children, to make the children span spans the height as the parent div.
Then you have to place the spans in the correct places by using left and right positioning.
.hpGridTopRow {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
position: relative;
padding-bottom: 20%;
height: 0;
overflow: hidden;
background: yellow;
position: relative;
}
.hpBox {
width: 25%;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
}
.hpBox.one {
width: 50%;
}
.hpBox.two {
left: 50%;
}
.hpBox.three {
right: 0;
}
.lightBlue {
background: #15b2d2;
}
.green {
background: #8cc63f;
}
.midBlue {
background: #6a8aa8;
}
.hbBoxesp {
color: #fff;
margin-top: 40px;
}
<div class="hpGridTopRow">
<span class="hpBox lightBlue one">
<p class="hbBoxesp">New to Restore</p>
</span>
<span class="hpBox green two">
<p class="hbBoxesp">Events</p>
</span>
<span class="hpBox midBlue three">
<p class="hbBoxesp">Talks</p>
</span>
</div>