Html 使用css设置div宽度时遇到问题

当我将此代码与JSFIDLE一起使用时，它可以正常工作，但在safari中它不能正常工作。我不确定问题是什么，因为它看起来很基本。问题是中间的聊天框右侧太过了。

问题截图：

---

我的笔记本电脑上没有safari，但我怀疑这是个问题

这应该可以做到：

.chat-messages {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    padding: 10px; 
    box-sizing: border-box;  
}

---

试试这个宽度：100%！重要的

body,
textarea,
input {
    font: 13px "Trebuchet MS", sans-serif;
}

.chat {
    max-width: 300px;
}

.chat-messages,
.chat textarea,
.chat-name {
    border: 1px solid #bbb;
}

.chat-messages {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    padding: 10px;
}

chat-message {
    margin-bottom: 10px;
}

.chat-name{
    width: 100%;
    padding: 10px;
    border-bottom: 0;
    margin: 0;
}

.chat textarea {
    width: 100%;
    padding: 10px;
    margin: 0;
    border-top:0;
    max-width: 100%;
}

.chat-status{
    color: #bbb;
}

.chat textarea,
.chat-name {
    outline:none;
}

.chat-messages {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    padding: 10px; 
    box-sizing: border-box;  
}