in FF flex container affects width and height of child items - firefox

Question

project is made on full BEM-STACK techology, so its not easy to show all code. in project's footer there's almost that following structure :
<div class="footer">
<div class="footer__inner">
<div class="footer__content page__col_8 footer__section">
</div>
<div class="footer__feedback page__col_3 footer__section ">
</div>
<div class="footer__social page__col_1 footer__section">
</div>
</div>
</div>
here are exact styles :
.footer {
height: 180px;
&__inner {
width: 1200px;
margin: 40px auto;
height: 100px;
display: flex;
padding: 0;
}
}
&__section {
box-sizing: border-box;
padding: 20px;
border: 2px solid var(--color-border);
border-right: 0px;
}
}
.page {
&__col {
&_1 {
width : 8.3333333333333%;
}
&_2 {
width : calc(2 / 12 * 100%);
}
&_3 {
width : calc(3 / 12 * 100%);
}
&_4 {
width : calc(4 / 12 * 100%);
}
&_5 {
width : calc(5 / 12 * 100%);
}
&_7 {
width : calc(7 / 12 * 100%);
}
&_8 {
width : calc(8 / 12 * 100%);
}
}
}
.footer {
&__social {
padding: 0px;
border: 1px solid var(--color-border);
width: 100px;
.link {
box-sizing: border-box;
display: inline-block;
width: 49px;
height: 49px;
border: 1px solid var(--color-border);
}
}
}
In all browsers except Firefeox width and height of .link are 49px, border is 1px. And in FF these values are computed into 48.16667px and 0.96667px. How can that be fixed? prefixes should have been added by ENB build system