Strange phenomenon of style setting width under Firefox_Experience exchange

There is a data list on the page, which is a table and is placed in a div window with the following structure:

Set the style for the container #container {width:100%; margin:10px;}
Set the style for the grid Style #grid {width:100%}

The test results are normal in IE. Under Firefox, the actual width of the container will exceed 100% and a horizontal scroll bar will appear. Because Firefox counts margin into the width, it is actually equal to 100% 20px>100%.
Of course, you can remove the margin definition of the div and use the padding of the body to set it, but there are other contents on the page that need to occupy the entire page.
So in the past, in order to solve this problem, I would define a width: 98% for divs in Firefox. This seems to have solved the problem, but if the browser window becomes smaller, the 98% 20px under Firefox may be greater than 100%. A horizontal scroll bar appears.

To give it a try, I changed the container style to #container {width:100%-20; margin:10px}, and then went to Firefox to take a look. Haha, it turned out to be normal. , it’s the same as under IE, it’s really strange, the definition of width: 100%-20 should be wrong! But it solved the problem of Firefox including margin. I tried it further and found that it can be reduced by any number from 100%. After checking some information, I still didn't understand the reason.
Maybe it’s just a bug, haha! Maybe some expert knows the reason. I have tested it myself and posted the code and screenshots: