Flexbox vertical alignment not working in IE 11 [duplicate] - css

Question

This question already has answers here:
flex container min-height ignored in IE
(3 answers)
flex property not working in IE
(5 answers)
Closed 5 years ago.
I'm working on someones code which seems to display well on chrome, firefox etc but not on IE 11 (surprise). Basically the header / call to action text and button should be vertically aligned (Which it does fine in chrome) but in IE the content is stuck at the top of the page?
I've had a go at it using flexbox but I'm out of ideas... Could someone please have a look at the source of this page and figure out a better way?
Would really appreciate if someone has some better CSS to throw in!
Thanks for any help
Link to jsfiddle
<div class="cta">
<div class="small-cta">
<div class="l-container">
<div class="l-row">
<div class="l-col min-0--8">
<div class="small-cta-left-container">
<h1 class="small-cta-header">Ask the Experts</h1>
<div class="small-cta-text__small">
Get answers and insights from industry professionals and other experienced
users.
</div>
</div>
</div>
<div class="l-col min-0--4">
<div class="small-cta-right-container">
<a class="small-cta-button" href="/login.html"><span class=
"cta-button__inner">Ask a Question</span></a>
</div>
</div>
</div>
</div>
</div>
.cta {
transition: transform .3s;
backface-visibility: hidden;
background: #373c44;
min-height: 120px;
}
.small-cta {
color: #ffffff;
line-height: 1.6;
text-align: center;
width: 100%;
max-width: 692px;
margin: 0 auto;
}
.l-container {
width: 100%;
margin: 0 auto;
padding: 0 10px;
max-width: 1190px;
}
#media (min-width: 0px)
.min-0--8 {
display: block;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
#media (min-width: 0px)
.min-0--4 {
display: block;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
#media (min-width: 768px)
.l-container {
padding: 0 16px;
max-width: 1202px;
}
#media (min-width: 768px)
.l-row {
margin-left: -16px;
margin-top: -16px;
}
.l-row {
display: flex;
flex-flow: wrap;
margin-top: -10px;
margin-left: -10px;
}
.small-cta-left-container {
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
min-height: 120px;
}
h1.small-cta-header {
font-size: 25px;
text-align: left;
margin-top: 0px;
}
.small-cta-text__small {
color: #ffffff;
font-size: 13px;
margin-top: -5px;
text-align: left;
margin-bottom: 6px;
}
.small-cta-right-container {
flex-direction: column;
justify-content: center;
overflow: auto;
min-height: 120px;
display: flex;
}
.small-cta-button {
display: inline-flex;
color: #ffffff;
background: #ee3237;
background: -moz-linear-gradient(left, #ee3237 0%, #f87c43 100%);
background: -webkit-linear-gradient(left, #ee3237 0%,#f87c43 100%);
background: linear-gradient(to right, #ee3237 0%,#f87c43 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3237', endColorstr='#f87c43',GradientType=1 );
transition: all .3s;
border-radius: 2px;
border-bottom: 3px solid #af171b;
height: 44px;
text-align: center;
vertical-align: middle;
width: 100%;
max-width: 450px;
}
.cta-button__inner {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
text-align: center;
white-space: nowrap;
width: 100%;
padding: 0 30px;
font-weight: 600;
}

Answer 1

Flexbox doesnt fully work on IE... You can use display: table on the parent, and display: table-cell;vertical-align:middle on the children.