html - 最新のメッセージを下に揃えることができません

Question

IRC のような Web チャットを作成する必要があります (最新のメッセージは、親コンテナーの下部に表示される必要があります)。

これが私の（失敗した）試みです：

.inner-conversation-container {
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 500px;
}


.conversation-stream-container {
    max-height: 100px;
    position: absolute;
    bottom: 0;
    overflow: auto;
    width: 100%;
}

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <div class='conversation-item'>
            <div class='conversation-message-part' msg-id='137'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='138'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='139'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='140'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='141'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='142'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>The latest message that needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

divがmsg-id="144"表示され、下に揃える必要があります。