flex doesn't support calc in IE11

Question

I am attempting to create a layout using Flexbox. In one of these layouts, I want 3 equal width columns. To accomplish this I am using calc to set the column width. This is working fine in modern browsers, but of course in IE it doesn't want to work. Here is my code:

.container {
  width:50vw;
  margin:0 auto;
  display:flex;
}
  .container > div {
    flex:1 0 calc(100% / 3);
  }

<div class="container">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

As I mentioned, this works fine in modern browsers, but in IE the columns just collapse on each other unless I use a specific percentage in place of calc.

Answer 1

It's a known bug.

IE 10-11 ignore calc() functions used in flex shorthand declarations.

Since this bug only affects the flex shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually.

source: https://github.com/philipwalton/flexbugs#flexbug-8

So, in other words, instead of:

flex: 1 0 calc(100% / 3)

Try:

flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);

---

Also, consider this: You don't even need the calc() function.

If you want three equal width columns, this will do:

flex: 1

or

flex: 1 0 30%

or even:

flex: 1 0 26%;

With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be 33.33%.

Since flex-grow will consume free space on the line, flex-basis only needs to be large enough to enforce a wrap (should it become necessary).

In this case, with flex-basis: 26%, there's plenty of space for the margins, borders, padding, etc., but never enough space for a fourth item.