"vertical aligned bottom"のオーバーフローが隠されている - 絶対配置された外側div内のdiv

Question

divの下部に垂直に整列されたdivに関する問題があります。

私の目標は、メッセージを下から上に表示できる「ログウィンドウ」を作成することです。十分なスペースがない場合は、先頭のメッセージが消えてしまいます（隠れてしまいます）。

問題：あなたはjsfiddle（現在は116px）上の例で見ることができるよう

まず、高さは、オーバートップ100pxに私は内部のより多くのdivを置く場合は、コンテナが成長するとみなされていません。 第2に、100ピクセルに強制すると、上部のdivの代わりに下部のdivをカットします。私は下部に最新のメッセージ（7,6,5、...）を見たい、

絶対位置を持つ外側のdivは滞在する必要があります。

私はよりよく理解するためにjsfiddle作成しました：あなたは下から出始め、同様contentにposition: absoluteを使用して、これを好きでした

https://jsfiddle.net/vbdo9xun/4/

#notifications { 
 
    position: absolute; 
 
    left: 4px; 
 
    top: 4px; 
 
    z-index: 100000000; 
 
    overflow: hidden; 
 
} 
 

 
#notifications .content { 
 
    width: 350px; 
 
    height: 100px; 
 
    padding: 2px 4px 2px 4px; 
 
    background-color: #321d12; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
} 
 

 
#notifications .content div { 
 
    font-size: 10px; 
 
    color: #efb718; 
 
}

<div id="notifications"> 
 
    <div class="content"> 
 
    <div>1. Lorem ipsum dolor sit amet, consetetur!</div> 
 
    <div>2. tempor invidunt ut labore et dolore magna!</div> 
 
    <div>3. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut!</div> 
 
    <div>4. sit amet, consetetur!</div> 
 
    <div>5. invidunt ut labore et dolore magna!</div> 
 
    <div>6. Lorem tempor invidunt ut labore et dolore!</div> 
 
    <div>7. Amet Lorem ipsum dolor sit amet, consetetur!</div> 
 
    </div> 
 
</div>

Answer 1

を

#notifications { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 1px; 
 
    top: 4px; 
 
    height: 100px;   /* set height here instead */ 
 
    overflow: hidden; 
 
} 
 

 
#notifications .content { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 350px; 
 
    padding: 2px 4px 2px 4px; 
 
    background-color: #404040; 
 
    color: white; 
 
    font-family: Arial; 
 
    box-sizing: border-box; 
 
} 
 

 
#notifications .content div { 
 
    font-size: 12px; 
 
}

<div id="notifications"> 
 
    <div class="content"> 
 
    <div>1. Lorem ipsum dolor sit amet, consetetur!</div> 
 
    <div>2. tempor invidunt ut labore et dolore magna!</div> 
 
    <div>3. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut!</div> 
 
    <div>4. sit amet, consetetur!</div> 
 
    <div>5. invidunt ut labore et dolore magna!</div> 
 
    <div>6. Lorem tempor invidunt ut labore et dolore!</div> 
 
    <div>7. Amet Lorem ipsum dolor sit amet, consetetur!</div> 
 
    </div> 
 
</div>