Chrome和Firefox中的奇怪溢出布局

Question

最近我正在用reactjs写一个聊天室，我发现我的代码在firefox和chrome浏览器上的行为是不同的。

这是chrome中的布局： Chrome

这是Firefox中的布局： Firefox

这是消息布局的CSS

.messages{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    .message{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 15px;
        .message-user-image{
            img{
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
        }
        .message-body{
            padding-left: 10px;
            .message-author{

            }
            .message-text{
                background: $body-color;
                color: #FFF;
                padding: 10px;
                border-radius: 10px;
            }
        }

        &.me{
            justify-content: flex-start;
            .message-body{
                .message-text{
                    background: $primary-color;
                    color: #FFF;
                }
            }
        }
    }
}

和html部分

renderMessage(message){

        return <p dangerouslySetInnerHTML={{__html: _.get(message, 'body')}} />
    }

<div className="content">
    <div className="messages">
        {messages.map((message, index) => {
            return (
                <div key={index} className={classNames('message', {'me':message.me})}>                                                   
                    <div className="message-user-image">
                        <img src={message.avatar} alt="" />
                    </div>
                    <div className="message-body">
                        <div className="message-author">
                            {message.me ? 'You ' : message.author} says: 
                        </div>
                        <div className="message-text">                                                       
                            {this.renderMessage(message)}
                        </div>
                    </div>
                </div>
            )
        })}
    </div>
</div>

当我点击消息部分下方区域中的发送按钮时，我将更新存储消息的容器并强制组件更新。基本上消息的边缘消失了，并且在chrome中叠加，但在firefox中并非如此。