相対的な親を絶対的な子で配置する

Question

子の両側にマージンを置いて、絶対的に親の右側に配置する方法を教えてください。子供がドキュメントの通常の流れの外側にあるときに、スクロールバーを生成するのはなぜですか（min-height）。そのスクロールバーを取り除くにはどうしたらよいですか？

また、calc（）関数を子の相対位置のコンテキストで使用すると、同じ結果が得られますか？子供の

* { 
 
    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

min-height: inherit;が400pxある親から値を継承し、margin: 20px;が100％を超える高さの合計を行い、あなたがそこにoverflow: auto;セットを持って、それがスクロールバーを意味し、コンテナがコンテンツを内部に保持できなかった場合に表示されます。

通常のコンテンツフローの場合、スクロールバーは表示されません。これはmin-heightであるため、コンテナは内容に合わせて高さを調整します。ただし、relativeとabsoluteの位置では、アブソリュートボックスが通常のフローから取り出され、コンテナは自動的に適合するように高さを調整することができず、子供の高さを超えるとオーバーフローが発生します。

スクロールバーを削除するには、前述のようにcalc()関数を使用できます。あなたは子供の上にmin-height: calc(100% - 40px);を設定する必要があります。または、overflowの値を親のhiddenに変更すると、出力は異なります。

ところで、box-sizing: border-box;が宣言されていますので、marginについては何もしません。