CSS - 在可滚动的flexbox div中没有​​正确调整大小

Question

我在Flexbox中显示了一长串消息，其中包含固定高度和任何溢出滚动，如下所示：

* {
    box-sizing: border-box;
}

.messages-page {
    max-width: 700px;
    margin: 0 auto;
}

.messages-page .messages {
    background: #EDEDED;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    margin-top: 30px;
    margin-bottom: 30px;

    /* THIS CAUSES THE PROBLEM */
    height: 300px;
    overflow-y: scroll;
}

.messages-page .messages .message {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    background: #FFF;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    width: 85%;
}

.messages-page .messages .message.incoming {
    align-self: flex-start;
}

.messages-page .messages .message.outgoing {
    align-self: flex-end;
}

.messages-page .messages .message .name,
.messages-page .messages .message .text {
    font-size: 0.8em;
}   

.messages-page .messages .message .name {
    font-weight: 700;
}

.messages-page .messages .message .text {
    line-height: 1.4em;
    margin-top: 10px;
    margin-bottom: 15px;
}

.messages-page .messages .message .date-time {
    font-size: 0.65em;
}

<div class="messages-page">
<div class="message-thread">
        <div class="messages">
            <div class="message outgoing">
                <div class="name">Me</div>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus ante quis pulvinar gravida. Pellentesque cursus nisi a imperdiet ultrices. In sapien nunc, tincidunt sit amet volutpat ut, porta consequat enim. Etiam eu dignissim arcu. Maecenas auctor, tellus a vestibulum sollicitudin, ligula lorem tempus turpis, nec convallis nulla erat ut tortor. Sed pellentesque ex dui, rutrum mollis diam scelerisque nec. Aenean vitae rhoncus elit. Maecenas a orci rutrum dui posuere dignissim. Phasellus non mauris elit. Integer lacinia nulla eu purus ultrices varius.</div>
                <div class="date-time">
                    <span class="date">September 23, 2016</span> at <span class="time">5:37pm</span>
                </div>
            </div>
            <div class="message incoming">
                <div class="name">Them</div>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus ante quis pulvinar gravida. Pellentesque cursus nisi a imperdiet ultrices.</div>
                <div class="date-time">
                    <span class="date">September 23, 2016</span> at <span class="time">5:40pm</span>
                </div>
            </div>
            <div class="message outgoing">
                <div class="name">Me</div>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus ante quis pulvinar gravida. Pellentesque cursus nisi a imperdiet ultrices. In sapien nunc, tincidunt sit amet volutpat ut, porta consequat enim. Etiam eu dignissim arcu. Maecenas auctor, tellus a vestibulum sollicitudin, ligula lorem tempus turpis, nec convallis nulla erat ut tortor.</div>
                <div class="date-time">
                    <span class="date">September 23, 2016</span> at <span class="time">5:42pm</span>
                </div>
            </div>
            <div class="message incoming">
                <div class="name">Them</div>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus ante quis pulvinar gravida. Pellentesque cursus nisi a imperdiet ultrices. In sapien nunc, tincidunt sit amet volutpat ut, porta consequat enim. Etiam eu dignissim arcu. Maecenas auctor, tellus a vestibulum sollicitudin, ligula lorem tempus turpis, nec convallis nulla erat ut tortor. Sed pellentesque ex dui, rutrum mollis diam scelerisque nec. Aenean vitae rhoncus elit. Maecenas a orci rutrum dui posuere dignissim. Phasellus non mauris elit. Integer lacinia nulla eu purus ultrices varius.</div>
                <div class="date-time">
                    <span class="date">September 23, 2016</span> at <span class="time">5:53pm</span>
                </div>
            </div>
        </div>
        <form action="" class="message-form">
            <label for="">Reply to <span class="username">Them</span></label>
            <textarea name="" id=""></textarea>
            <input type="submit" value="Send Message" class="btn orange">
        </form>
    </div>
</div>

出于某种原因，当我没有为“messages”容器div设置高度时，单个“message”div是正确的高度，其中包括所有内容，包括名称，文本和date-time部分。但是当我在“消息”上设置高度时，消息div的高度只是“文本”和“名称”部分，并忽略日期时间div。

任何想法为什么？感谢