Calc() in css3 using less is giving a wrong output

Question

I have the following line of css code in my less file

@media screen and (min-width: 480px) {
    /* Extra Small Devices, Phones */
    select#pseudoId {
        font-size: 1em;
        font-weight: 700;
        width: -moz-calc(100% + 10px);
        width: -webkit-calc(100% + 10px);
        width: calc(100% + 10px);
    }
}

The issue is when it is rendered on browser and I check the developer tool is shows me width as calc(110%) which is not correct.

can someone help me with this, what needs to be done for it to render like (500px + 10px)

**(if 100% is 500px)