最大宽度：100% 不工作

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 属性既不适用于 table，也不适用于 tbody。td 的内容使整个结构到 table 的宽度超出 maxwidth，它应该是最顶层 div 宽度的 100%。无论我做什么，或者我尝试在谷歌中搜索什么，我都找不到解决方案。也许有比 max-width 更高优先级的东西？

另外，我正在使用铬。

Answer 1

据我所知，“最大宽度：100％；” 意味着宽度不能超过组件所在的整个容器。宽度可以是任何东西并占据整个容器（div 或 table）。这不会阻止您添加的组件的大小更改容器的大小。

要解决此问题，您需要将 max-width 设置为实际值（就像您对 min-width 所做的那样），而不是仅仅让它占据整个容器（仍然可以是任何大小）。

希望这可以帮助...

编辑：正如您在之前的评论中所说，尝试将 max-width 应用于 td 元素而不是整个 table 元素。