Relatives Elternteil mit absolutem Kind positionieren

Question

Wie würde ich das Kind absolut auf die rechte Seite des Elternteils positionieren (mit Rand auf allen Seiten des Kindelements)? Warum verursacht das Kind, dass das übergeordnete Element (mit einer min-height) eine Bildlaufleiste generiert, wenn das Kind aus dem normalen Fluss des Dokuments fällt? Was muss ich tun, um diese Bildlaufleiste zu entfernen?

Alternativ, wie könnte ich die Funktion Calc() im Kontext einer relativen Position des Kindes verwenden, damit ich das gleiche Ergebnis bekomme?

* { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    width: 50%; 
 
    min-height: 400px; 
 
    margin: 50px auto; 
 
    background: hsl(220, 80%, 50%); 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
.child { 
 
    width: 200px; 
 
    margin: 20px; 
 
    min-height: inherit; 
 
    background: firebrick; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="box"> 
 
    <div class="child"></div> 
 
</div>

Answer 1

Die min-height: inherit; auf das Kind den Wert aus dem übergeordneten erbt die 400px ist, und die margin: 20px; macht die Gesamthöhe von über 100%, und Sie haben es overflow: auto; Sets, bedeutet es die Scrollbar wird angezeigt, wenn der Container den Inhalt nicht enthalten konnte.

Wenn sie sich im normalen Inhaltsfluss befinden, wird die Bildlaufleiste nicht angezeigt, da sie min-height ist, passt der Container die Höhe an den Inhalt an. In den Positionen relative und absolute wird die absolute Box jedoch aus dem normalen Fluss herausgenommen. Der Container kann die Höhe nicht automatisch anpassen und dies führt zu einem Überlauf, wenn die Höhe des Kindes überschritten wird.

Um die Bildlaufleiste loszuwerden, können Sie calc() Funktion wie Sie erwähnt verwenden. Sie müssen nur min-height: calc(100% - 40px); auf das Kind setzen. Oder ändern Sie overflow Wert zu hidden auf dem Eltern, die Ausgabe wird jedoch anders sein.

Übrigens, da Sie haben box-sizing: border-box; deklariert, aber es tut nichts für margin.