CSS calc() operation not working properly on Edge browser - css

Question

I have a 3 column element on a page
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
And have the following css rules:
main {
display:flex;
flex-wrap:wrap;
margin-left: -20px;
}
main > * {
margin-left: 20px;
}
aside.left-sidebar {
max-width: 320px;
width: calc(25% - 20px);
}
.main-content {
width: calc(100% - 800px);
margin: 0 auto;
padding-top: 65px;
max-width: 1200px;
}
aside.right-sidebar {
max-width: 400px;
width: calc(25% - 20px);
}
This works fine on Chrome and Firefox but not on Microsoft Edge, anything am missing?
One thing I noticed on Edge upon checking its DevTools is that it will reverse the operation on the calc() function so instead of width: calc(25% - 20px); it'll convert it to calc(-20px + 50%)
unsure if that's the culprit tho the result is the same I think.
UPDATE: Forgot to include that there's a max-width set on columns and max-width:100% is called when screen size is #media screen and (max-width: 1440px).

Answer 1

Possible workaround that shouldn't be used
This only appears to be a problem with percentage widths, not viewport width units (vw). Here is a workaround that shouldn't be used:
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
max-width: 100%;
width: calc(25vw - 20px);
}
.main-content {
background: green;
max-width: 100%;
width: calc(50vw - 20px);
margin: 0 20px;
}
aside.right-sidebar {
background: blue;
max-width: 100%;
width: 25vw;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>
What you should use
Since you're using flex, use flex:
First and third column are given flex: 1
Center column is given flex: 2
Place the left and right margin on the center column
The columns can be given individual max-widths
No widths are given
This gives you the same ratio, no need for calc.
Example
Note: I have removed the default margin on the body and given main 100vh so it has a height for this example.
body {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
aside.left-sidebar {
background: red;
flex: 1;
max-width: 320px;
}
.main-content {
background: green;
flex: 2;
max-width: 1200px;
margin: 0 40px;
}
aside.right-sidebar {
background: blue;
flex: 1;
max-width: 400px;
}
<main>
<aside class="left-sidebar"></aside>
<section class="main-content"></section>
<aside class="right-sidebar"></aside>
</main>