Is there a way to replace the calc part from "flex-basis: calc(50% - 20px)" with other property?

Question

I have the following element:

<div style="display: flex; flex-direction: row;">
   <div style="flex 1 1 calc(50% - 20px);" [repeated-n-times]> <!-- I don't want to use calc() here. But I'm looking for the same effect. -->
      <!-- some other markup -->
   </div>
</div>

Basically, I want to get rid off the calc part from flex-basis property. The last one from shorthand syntax.

Why? As you may know, IE11 is having some issues with calc in flex-basis property, on other side, we are using @angular/flex-layout module in our application, and we're looking for a workaround to make the layout looks (well, partially) good in IE11.

Is this doable?

Answer 1

This is one of IE's flex bugs, so if you use the longhand flex-basis, calc() will work fine.

div > div {
  background: lightgray;
  margin: 10px;
}

<div style="display: flex; flex-direction: row;">
   <div style="flex-grow: 1; flex-basis: calc(50% - 20px);"> test
   </div>
   <div style="flex-grow: 1; flex-basis: calc(50% - 20px);"> test
   </div>
</div>

---

Updated based on a comment

It is stated in the comment that @angular/flex-layout merges longhand flex into shorthand, so in that case one of these 3 options could help

• tell Angular to not merge (if possible)

• add a class and set its CSS to flex-basis: calc(50% - 20px) !important;
  _{The !important is needed to override the inline style}

• use width: calc(50% - 20px); ^{Note 1}

---

_{Note 1}

Based on how you actually use flex-basis, in many cases width does the same.

Here is a great answer explaining their differences:

• What are the differences between flex-basis and width?

---

Update 2

If you can drop the flex-grow: 1, you can simply do this

<div style="display: flex; flex-direction: row;">
  <div style="flex: 0 1 50%; margin: 0 10px; background: lightgray;"> test
  </div>
  <div style="flex: 0 1 50%; margin: 0 10px; background: lightgray;"> test
  </div>
</div>