Flexbox row with min-height does not stretch in IE - html

Question

I have one flexbox with two rows and min-height. The right row has another flex with 2 columns with justify-content space between.
It works perfectly fine in Chrome but it does not fill the min-height in IE. There are many questions about it but none of them worked for me. Please note I have different styles of this where image is on top, bottom or right. I need to expand both content and image to fill the entire card in IE.
Here is the code.
.card-wrap {
display: block;
position: relative;
}
a {
display: block;
}
.card-image-left {
flex-direction: row;
}
.card {
box-sizing: border-box;
display: flex;
border: 1px solid black;
min-height: 200px;
}
.card-content {
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.card-text {
font-size: 0.875rem;
color: #1D1D1D;
}
.card-footer {
margin-top: 12px;
}
.card-image-wrap {
overflow: hidden;
position: relative;
}
h3 {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 4px 0;
}
.card-image {
width: 100%;
background-size: cover;
width:80px;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg");
}
<div class='card-wrap'>
<a href='#'>
<div class='card card-image-left'>
<div class='image-wrap'>
<div class='card-image'>
</div>
</div>
<div class='card-content'>
<div class='card-header'>
<h3>test title</h3>
<div class='card-text'>test subtitlte</div>
</div>
<div class='card-footer'>
<div>
<div class='card-footer-monetary'>1000</div>
</div>
</div>
</div>
</div>
</a>
</div>
Image from IE

Answer 1

Its a bug in IE 10-11. In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
More info: https://github.com/philipwalton/flexbugs#flexbug-3
Workaround
Simply wrap the flex container (here it div with classname card) with another flex-container having flex direction column
.ie-fix-wrapper{
display: flex;
flex-direction:column;
}
.card-wrap {
display: block;
position: relative;
}
a {
display: block;
}
.card-image-left {
flex-direction: row;
}
.card {
box-sizing: border-box;
display: flex;
border: 1px solid black;
min-height: 200px;
}
.card-content {
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.card-text {
font-size: 0.875rem;
color: #1D1D1D;
}
.card-footer {
margin-top: 12px;
}
.card-image-wrap {
overflow: hidden;
position: relative;
}
h3 {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 4px 0;
}
.card-image {
width: 100%;
background-size: cover;
width:80px;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg");
}
<div class='card-wrap'>
<a href='#'>
<div class="ie-fix-wrapper">
<div class='card card-image-left'>
<div class='image-wrap'>
<div class='card-image'>
</div>
</div>
<div class='card-content'>
<div class='card-header'>
<h3>test title</h3>
<div class='card-text'>test subtitlte</div>
</div>
<div class='card-footer'>
<div>
<div class='card-footer-monetary'>1000</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>

Answer 2

The solution provided by #Soothran works well. There is also alternative solution that is quicker to implement - inherit min-height in the children. In this case of the code above:
.image-wrap {
min-height: inherit;
}
.card-content {
min-height: inherit;
}
.card-wrap {
display: block;
position: relative;
}
a {
display: block;
}
.card-image-left {
flex-direction: row;
}
.card {
box-sizing: border-box;
display: flex;
border: 1px solid black;
min-height: 200px;
}
.card-content {
min-height: inherit;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.card-text {
font-size: 0.875rem;
color: #1D1D1D;
}
.card-footer {
margin-top: 12px;
}
.card-image-wrap {
overflow: hidden;
position: relative;
}
h3 {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 4px 0;
}
.image-wrap {
min-height: inherit;
}
.card-image {
width: 100%;
width:80px;
height: 100%;
background: black;
}
<div class='card-wrap'>
<a href='#'>
<div class='card card-image-left'>
<div class='image-wrap'>
<div class='card-image'>
</div>
</div>
<div class='card-content'>
<div class='card-header'>
<h3>test title</h3>
<div class='card-text'>test subtitlte</div>
</div>
<div class='card-footer'>
<div>
<div class='card-footer-monetary'>1000</div>
</div>
</div>
</div>
</div>
</a>
</div>

Answer 3

You need to wrap any flex-direction:column inside a flex-direction:row
(or just display:flex for simple)