IE11 Flexbox Bug: flex-basis with calc when using flex shorthand

IE11 Flexbox Bug when using flex-basis with calc and % percent
Author: Mark Conroy
Date:

When using the flex shorthand, you cannot use % for flex-basis if using calc.

Problem:

When using the flex shorthand (flex: 1 0 auto), you cannot use % for flex-basis if using calc, e.g flex: 1 0 calc(50% - 2rem).

Here's the sample code we will work with:

<div class="flex-container">
  <div class="flex-item">&nbsp;</div>
  <div class="flex-item">&nbsp;</div>
  <div class="flex-item">&nbsp;</div>
  <div class="flex-item">&nbsp;</div>
  <div class="flex-item">&nbsp;</div>
  <div class="flex-item">&nbsp;</div>
</div>

For example, this will not work in IE11:

 .flex-item { 
  flex: 1 0 calc(50% - 2rem); 
}

but writing it longhand will, like so:

 .flex-item { 
  flex-grow: 1; 
  flex-shrink: 0; 
  flex-basis: calc(50% - 2rem); 
}

 

I guess it's another reason to agree with Harry Roberts that CSS Shorthand is Considered an Anti-Pattern.

 

See the Pen IE11 Flexbox Bug: flex-basis with calc by Mark Conroy (@markconroy) on CodePen.

 

 

IE11 Flexbox Bug when using flex-basis with calc and % percent

 

 

 

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Tags