html - box-sizing + border + 绝对 child

Question

我最近发现了这个问题。

Check for demo on jsfiddle

至于我，大纲表现不对，不是吗？ .outside 元素的框模型不应该包括它的边框，以便 absolute 定位的子元素也勾勒出这些边框吗？

这是一个已知问题吗？这真的是正确的行为吗？如果是这样，有人可以向我解释为什么会这样吗？

What I expected to have as result

请不要评论如何解决问题。但是请解释为什么会出现这个问题。

提前致谢:)

问候 飞利浦

Answer 1

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

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

在这里查看 https://jsfiddle.net/2mytb43a/3/