Encountering a problem in IE10+11 when trying to vertically center two Bootstrap columns within a row using flexbox.
The dynamic content in the columns requires the row to have a minimum height of 65px. However, if the content expands and spans multiple lines, the row should be able to grow in height while still keeping the columns vertically centered. This rules out specifying a fixed height.
The issue arises as IE10+11 only support specific height with flexbox, not min-height.
Various attempted workarounds such as display table-cell, float: none, etc., resulted in breaking the column offset in Bootstrap.
Seeking solutions or suggestions for addressing this challenge.
Sample HTML:
<div class="row">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Title - Can vary in size</div>
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Optional sub title - Can vary in size</div>
</div>
CSS:
.row {
min-height: 65px;
display: flex;
flex-direction: column;
justify-content: center;
}
JsFiddle link here (including vendor prefixes).