別のものの中にdivを表示

Question

私はoverflow：hiddenを持つ親divを持っています。親divの内部には、親divの高さ以上の高さの動的divがあります。子divをそのまま表示させるにはどうすればいいですか？これで、親divの高さのためにクリップされます。私はスクロールバーを表示させたくありません。

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;"> 
    <div style="width:100%;top:5px;left:150px;position:absolute;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);"> 
    sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg 
    </div> 
</div> 

更新

うまく動作するだろうと私には思えます。しかし、私はposition：child divとの相対的関係を使いたくありません。

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;"> 
    <div style="width:100%;top:5px;left:150px;position:relative;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);"> 
    sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg 
    </div> 
</div> 

Answer 1

位置を追加すると、絶対的に内側のdivをフローから取り出すことができます。

Answer 2

子divをフローから外して、固定または絶対位置を使用すると、目に見えるようになります。しかし、注意してください：親のdivが静的でなければなりません：JSFiddleにも

.holder { 
 
    position: relative; 
 
} 
 
.parent { 
 
    overflow: hidden; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 
.child { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    right: 10px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
}

<div class="holder"> 
 
    <div class="parent"> 
 
     <div class="child">Visible?</div> 
 
    </div> 
 
</div>

を。