Box-Sizing + Grenze + absolute Kind

Question

Ich habe dieses Problem vor kurzem entdeckt.

Check for demo on jsfiddle

Was mich betrifft, verhält sich der Umriss falsch, nicht wahr? Sollte das Boxmodell des .outside Elements seine Grenzen nicht enthalten, so dass das absolute positionierte Kindelement diese Grenzen ebenfalls umrahmt?

Ist dies ein bekanntes Problem? Ist das richtiges Verhalten? Wenn ja, könnte mir jemand erklären, warum es so ist?

What I expected to have as result

Bitte nicht kommentieren, wie das Problem zu lösen. Aber bitte erklären Sie, warum das Problem auftritt.

Dank im Voraus :)

Grüße Phlips

Answer 1

Dies ist normal, da position: absolute, die ein Element relativ zu einem Behälter positionieren. Standardmäßig ist der Container das Browserfenster. Wenn jedoch ein übergeordnetes Element entweder position: relative oder position: absolute enthält, wird es als übergeordnetes Element für Positionskoordinaten für seine untergeordneten Elemente fungieren.

Mit Eltern, haben Sie zwei Attribute:

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

Wenn Sie es entfernen, wird Umriss in voller Größe sein, da Sie 4 Attribute gesetzt: top, right, bottom, left 0 ist (es ändern, um die Änderung zu sehen).

Answer 2

Nur box-sizing: border-box nicht genug ist, Sie müssen von den Eltern Breite und Höhe erben:

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

prüfen https://jsfiddle.net/2mytb43a/3/