浏览器未遵循CSS视觉格式化模型规范？技术疑问求助

根据CSS视觉格式化模型的描述：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块宽度

当margin和width均不为auto，且它们的总和大于包含块宽度时，margin-right会被忽略，其值将被重新计算以满足等式成立。

示例代码 #

CSS代码

.parent {
  background-color: #01c1ff;
  width: 400px;
  height: 400px;
  margin: auto;
}

.child {
  height: 200px;
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
  background-color: #ff01c1;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

在上述代码中，child元素的包含块宽度为400px，width+margin-left+margin-right的总和为500px。按照规范描述，margin-right最终应被设置为50px以满足等式。

但在浏览器中检查后发现，margin-right并未被设置为50px，仍保持150px的初始值。

内容的提问来源于stack exchange，提问作者user24948077