最大宽度：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 优先级更高的东西？

另外，我正在使用 chrome。

Answer 1

你的主 div .chat 有这个属性

.chat
{
  position: absolute;
  min-width: 400px;
  **width: 20%;**
  height: 100%;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
}

您将主父级设置为width:20%，这样您的表格内容就会显示较小并且不适用于.chat-messages 类的max-width:100%。

Answer 2

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

Answer 3

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

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

希望这会有所帮助...

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