親は位置指定された子でスクロールバーを生成します

Question

position：relativeのプロパティを持つ最後の子にトップオフセットプロパティを適用すると、親がスクロールバーを生成するのはなぜですか？スクロールバーを生成する親の固定高さはありません。

https://jsfiddle.net/gn3svh1w/

HTML

<div class="wrap"> 
    <div class="child one"></div> 
    <div class="child two"></div> 
    <div class="child three"></div> 
</div> 

CSS

.wrap { 
    width: 30%; 
    min-height: auto; 
    background: slategrey; 
    overflow: auto; 
} 

.child { 
    width: 100px; 
    height: 100px; 
    background: tomato; 
    margin: 1rem; 
} 

.three { 
    position: relative; 
    top: 40px; 
} 

Answer 1

overflow: autoも貢献しています。あなたはそれを取る場合（overflow: visibleは通常私が思うのはデフォルトですか？）、赤色のボックスが親コンテナの下端の外に出てきます。

overflow: autoを追加すると、親がブラウザーに高さを決定させるように指示します - FFと他のデスクトップではスクロールバーがレンダリングされます。

参照https://developer.mozilla.org/en-US/docs/Web/CSS/overflow詳細

Answer 2

のための基本的にこれは、ブラウザは高さを決定する方法の問題です。 3つの内側divはすべて100pxの高さと1remのマージンを持ちます。これは、.wrap divの高さを提供します。

これで、一番上の位置を.threeに設定すると、内側のdivで計算された高さは変更されません。単にdivを動かすだけで、.wrapのスクロールバーが表示されます。