Equal width flexbox columns in IE

Question

I'm building a simple flexbox column layout and have to support IE10. I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.

I can solve this issue by setting a max-width: 50%, but this means we need percentages based on the number of columns we want. It works for two columns, but for three we'd need 33.333% etc.

Is there any other way to make IE10/11 to keep flex widths equal?

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>


.columns {
  display: -ms-flexbox;
  -ms-flex-flow: row;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;
}

.column {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  min-height: 200px;
  border: 1px solid red;
}

http://jsbin.com/gimifixexo/1/edit?html,css,output

Answer 1

I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.

No, that is not entirely correct, they all, by default, size the flex item based on its content.

There is a difference though, where for most browsers a flex item's default flex is flex: 0 1 auto, but for IE10 it is flex: 0 0 auto.

This basically mean all but IE10 allow flex item's to shrink (the second value represents flex-shrink).

So to make this work, all that should be needed is flex: 1 1 0.

But, to also make IE 10 and 11 behave, we need to give the flex-basis a unit, 0px, and IE10 might also need width: 100%, though can say for sure as I run mine emulated.

With the short flex: 1, IE11 will, in general, automatically set its flex-basis with a unit, though for IE10 it might not, and I'm not fully sure if the prefixed property is bug free, and since I can't test it properly not having devices with the older browsers, using the full shorthand *-flex will be safer.

Stack snippet

.columns {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*  "flex-flow: row" is default, and so is "width: 100%"
  -ms-flex-flow: row;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;*/
}

.column {
  -ms-flex: 1 1 0px;                  /*  IE10 fix  */
  -webkit-flex: 1 1 0;                /*  changed  */
  flex: 1;                            /*  changed  */
  min-height: 70px;
  border: 1px solid red;
  width: 100%;                        /*  IE10 might need this  */
}

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>