Überlauf versteckt funktioniert nicht für "vertikal ausgerichteten Boden" - divs in einem absolut positionierten äußeren div

Question

Ich habe ein Problem in Bezug auf meine divs, die vertikal auf die Unterseite eines div ausgerichtet sind.

Mein Ziel ist es, ein "Protokollfenster" zu erstellen, in dem ich Nachrichten von unten nach oben anzeigen kann. Wenn nicht genügend Platz vorhanden ist, sollten die oberen Meldungen verschwinden (Überlauf ausgeblendet).

Probleme:

Zuerst wird die Höhe nicht berücksichtigt, wenn ich in mehr divs setzen, wird der Behälter wachsen und overtop 100px, wie Sie im Beispiel auf jsfiddle (derzeit 116px) sehen kann. Zweitens, wenn ich es auf 100px erzwinge, wird es die unteren Divs statt der oberen schneiden. Ich möchte die neuesten Nachrichten auf der Unterseite sehen (7, 6, 5, ...),

Das äußere div mit der absoluten Position muss bleiben.

Ich habe ein jsfiddle für ein besseres Verständnis geschaffen:

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

du gefallen könnte, position: absolute auf der content Verwendung auch von unten anfangen

#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>