box-sizing + border + absolute child

Question

I recently discovered this problem.

Check for demo on jsfiddle

As for me, the outline behaves wrong, doesn’t it? Shouldn’t the box model of the .outside element include its borders, so that the absolute positioned child element outlines those borders aswell?

Is this a known problem? Is this really correct behavior? If so, could someone explain to me why it is?

What I expected to have as result

Please do not comment on how to solve the problem. But please explain why the problem occurs.

Thanks in advance :)

Regards phlips

Answer 1

Just box-sizing: border-box is not enough, you need to inherit width and height from parent:

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

Check here https://jsfiddle.net/2mytb43a/3/

Answer 2

In this case when using position: absolute ..

.. the containing block is formed by the padding edge of the ancestor.

See CSS Specifications - 10.1 Definition of "containing block"

For whatever reason..