html - 最大宽度 : 100% not working

Question

我正在尝试做一个类似聊天的东西，它有以下结构:

<div class="chat">
    <div id="messagesWrap" class="chat-messages">
        <table id="chat">
            <tr>
                <td>
                    A certain long text, whos length overflows the "chat" container div.
                </td>
            </tr>
            //some more <tr><td> pairs go here with JS.
        </table>
    </div>
</div>

此外，我还有以下 CSS:

.chat
{
    position: absolute;

    min-width: 400px;
    width: 20%;
    height: 100%;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
}

.chat-messages
{
    width: 100%;
    max-width: 100%;
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: scroll;
}

#chat
{
    height: 100%;
    max-width: 100%;
}

#chat>tbody
{
    max-width: 100%;
}

这一切的问题在于，max-width 属性对表和 tbody 都不起作用。 td 的内容使整个结构到 table 的宽度超出了 maxwidth，这应该是最顶层 div 宽度的 100%。无论我做什么，或者我尝试在谷歌中搜索什么，我都找不到解决方案。也许有比 max-width 更高优先级的东西？

此外，我正在使用 chrome。

Answer 1

max-width 属性防止元素超过其父元素的宽度，因此您可以为表容器 class chat-messages 设置一定的宽度并使用max-width: 100%; 在你的表格中。在两者中使用 max-width: 100%; 意味着它们都可以填满整个屏幕。