Firefox: 100% and inner padding?

Question

I have a div with a width of 100% and paragraphs inside. The div has padding of 1.1em. On Chrome evrything works as expected - div spans to 100% of parent's space and paragraphs get squeezed a little due to the padding.

However on Firefox div expends to 100% + padding. How to do I force inner padding on firefox?

Answer 1

How to do I force inner padding on firefox?

Use box-sizing: border-box; for the element, as by default, the padding border and margin are counted outside the element.

Using box-sizing: border-box; will alter the box model, which will make the padding and border to be counted inside the element instead of outside.

Demo Without box-sizing

Demo With box-sizing

See the difference? You won't get a horizontal scroll bar in the second demonstration, where am using border-box value for box-sizing property.