Странный макет переполнения в Chrome и Firefox

Недавно я пишу чат с помощью responsejs, и я обнаружил, что поведение моего кода отличается в браузерах Firefox и Chrome.

Это макет в хроме: Хром

Это макет в Firefox: Fire Fox

Это 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>

И когда я нажимаю кнопку отправки в области под частью сообщения, я обновляю контейнер, в котором хранится сообщение, и принудительно обновляю компонент. В основном поля сообщений просто исчезали и складывались в хроме, но не в случае с firefox.