Published: Tue 05 Mar 2019

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

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

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

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:

  1. <div class="flex-container">
  2. <div class="flex-item"></div>
  3. <div class="flex-item"></div>
  4. <div class="flex-item"></div>
  5. <div class="flex-item"></div>
  6. <div class="flex-item"></div>
  7. <div class="flex-item"></div>
  8. </div>

For example, this will not work in IE11:

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

but writing it longhand will, like so:

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

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

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.