html - 如何避免我的溢出文本在 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

尝试将 align-items: center; 更改为 align-items: baseline;