Vertical align (Bootstrap 3) elements in flexbox container in IE10+11

Question

I have an issue with IE10+11 when vertically centering two Bootstrap columns in a row using flexbox.

The columns have dynamic content and the row must have a min-height of 65px. However, if the content expands into several lines of text, the row should be able to grow in height - still maintaining the columns vertically aligned. Hence, specifying a fixed height isn't an option.

The problem is that in IE10+11 flexbox only works with a specific height - not min-height.

I tried with display table-cell, float: none, etc. but it breaks the column offset in Bootstrap.

Does anyone know a workaround for this issue?

The html:

<div class="row">
  <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Title - I can be any size</div>
  <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Optional sub title - I can be any size</div>
</div>

Css:

.row {
  min-height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

JsFiddle here (including vendor prefixes.)

possible duplicate: http://stackoverflow.com/q/40490954/3597276 — Michael Benjamin, Feb 01 '17 at 12:42

Meek · Accepted Answer · 2017-02-02T07:34:11.863

It seems that the min-height bug can we workedaround by wrapping the .row in an element with another flex definition - like this:

<div class="row-fix">
    <div class="row">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Title - I can be any size</div>
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Optional sub title - I can be any size</div>
    </div>
</div>

adding this to css:

.row-fix {
     display: flex;
     flex-direction: row;
 }
.row {
    min-height: 65px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Vertical align (Bootstrap 3) elements in flexbox container in IE10+11

1 Answers1