如何避免溢出文本在DIV高度

Question

我正在练习flexbox，并尝试在div中构建一个带有一些文本的简单对话框。确定..

一切都变得麻烦了。但是当我在我的消息div中放入一些示例文本时，它开始看起来比溢出的文本小。

我试图设置一些调整..但似乎没有任何工作......

#areaMsg {
    width:86%;
    float:right;
    height:100%;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    overflow:auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background:yellow;
}

看看这里发生了什么：

LINK IN FIDDLE

https://jsfiddle.net/rj27p2rd/

P.s：注意第1,2和3行是完全隐藏的。第4行被截断。

Answer 1

尝试将对齐项目：中心; 更改为对齐项目：基线;