Responsive Flexbox Divs - html

Question

I want all inner divs containing text and with background color to be of the same height as the outer div (col).
Is there a way to accomplish that without jQuery?
.row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
}
.col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1em;
border: solid;
justify-content:center;
align-items:center;
overflow:hidden;
}
.col img{
width:100%;
height:auto;
}
<div class="row">
<div class="col">
<div><img src="" alt="" /></div>
<div style="background-color:#ff0000;">
This is a short text.
</div>
</div>
<div class="col">
<div><img src="" alt="" /></div>
<div style="background-color:#ff3654;" >
This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.
</div>
</div>
<div class="col">
<div><img src="" alt="" /></div>
<div style="background-color:#ff0000;">
This is CSS, just wanted to let you know that you suck.
</div>
</div>
</div>
https://jsfiddle.net/hcmnztof/1/

Answer 1

You can use flexible boxes again for .col:
.col {
display: flex;
flex-direction: column;
align-items: stretch; /* default value */
}
.col > :last-child {
flex-grow: 1;
}
.row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
}
.col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1em;
border: solid;
justify-content: center;
overflow: hidden;
display: flex;
flex-direction: column;
}
.col > :last-child {
flex-grow: 1;
}
.col img {
width: 100%;
height: auto;
}
<div class="row">
<div class="col">
<div>
Image1
</div>
<div style="background-color:#ff0000;">
Lorem ipsum.
</div>
</div>
<div class="col">
<div>
Image2 <br/> Image2
</div>
<div style="background-color:#ff3654;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.
</div>
</div>
<div class="col">
<div>
Image3 <br/> Image3 <br/> Image3
</div>
<div style="background-color:#ff0000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
</div>
</div>
</div>

Answer 2

thanks for your input. I used this page to gain some basic knowledge about flexbox. CSS-Tricks A guide to flexbox
Then I started from scratch and came up with what I wanted: jsfiddle
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
padding: 10% 0 10% 0;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row img{
width:100%;
height:auto;
}
.col {
-webkit-box-flex:1;
-moz-box-flex:1;
flex:1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:column;
align-items:stretch;
margin-right:3%;
}
.subcol{
-webkit-box-flex:1;
-moz-box-flex:1;
flex:1 auto;
margin-top:-1%;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.subcol h2{
text-align:center;
color:#ffffff;
padding: 10% 10% 0 10%;
font-weight:200;
font-size:2.2em;
line-height:1;
text-transform:uppercase;
margin-bottom:13%;
}
.subcol p{
text-align:center;
padding: 0 10% 10% 10%;
margin-top:-1.2%;
color:#ffffff;
font-size:0.9em;
}
<div class="row">
<div class="col">
<img src="http://lorempixel.com/50/50" alt="" />
<div class="subcol" style="background-color:#ff0000;">
<h2>Test headline</h2>
<p>This is a short text.</p>
</div>
</div>
<div class="col">
<img src="http://lorempixel.com/120/150" alt="" />
<div class="subcol" style="background-color:#ff3654;" >
<h2>Test headline</h2>
<p>This is a text about how much I hate fucking around ith CSS when I'm not a pro. I wasted so much time on this issue I don't even mind writing this text. Sure you could use lorem ipsum but why bother, time you enjoy wasting is not wasted.</p>
</div>
</div>
<div class="col">
<img src="http://lorempixel.com/100/150" alt="" />
<div class="subcol" style="background-color:#ff0000;">
<h2>Test headline</h2>
<p>This is CSS, just wanted to let you know that you suck.</p>
</div>
</div>
</div>