box-sizing + border + absolute child

Question

我最近发现了这个问题。

Check for demo on jsfiddle

至于我，大纲表现不对，不是吗？ .outside元素的框模型是否应该包含其边框，以便absolute定位的子元素也可以概述这些边框？

这是一个已知问题吗？这是非常正确的行为吗？如果是这样，有人可以向我解释原因吗？

What I expected to have as result

请不要评论如何解决问题。但请解释问题发生的原因。

提前致谢：）

此致 PHLIPS

Answer 1

仅仅box-sizing: border-box是不够的，您需要从父级继承宽度和高度：

.inside {
  position: absolute;
  outline: #00f solid 2px;
  width: inherit;
  height: inherit;
}

点击此处https://jsfiddle.net/2mytb43a/3/

Answer 2

这是正常的，因为position: absolute将相对于容器定位元素。默认情况下，容器是浏览器窗口，但如果父元素设置了position: relative或position: absolute，那么它将作为其子项的定位坐标的父元素

对于父级，您有2个属性：

border-right: 50px #f5f solid;
border-bottom: 50px #f5f solid;

如果删除它，轮廓将是完整大小，因为您设置了4个属性：top, right, bottom, left为0.（更改它以查看更改）。

Answer 3

在这种情况下，使用位置：绝对..

..包含块由祖先的填充边缘形成。

请参见CSS Specifications - 10.1 Definition of "containing block"

出于任何原因。