Do browsers correctly implement the Visual Formatting Model from the CSS spec?
<p>Reading the CSS Spec <a href="https://drafts.csswg.org/css2/visudet.html#blockwidth" rel="nofollow noreferrer">https://drafts.csswg.org/css2/visudet.html#blockwidth</a> I am somewhat scratching my head at section 10.3.3. which supposedly explains how block level non-replaced elements are laid out within their containing block. It reads:</p>
<blockquote>
<p>The following constraints must hold among the used values of the other properties:</p>
<p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block...</p>
<p>..If all of the above have a computed value other than 'auto', the values are said to be &quot;over-constrained&quot; and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.</p>
</blockquote>
<p>This suggests that an element will always be stretched or somehow shrunk to fit into its containing block, but that's clearly not the case; Setting a width to an explicit value will make an element either narrower or wider than it's containing block, overflowing if necessary. Also I see no sign of the margin-right or margin-left properties changing in accordance with the equation.</p>
<p>So have I misunderstood the spec (admittedly likely!) or are browsers not implementing it properly?</p>