最大寬度：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

max-width屬性防止元素超過其父元素的寬度，因此您可以為 table 容器class chat-messages設置一定的寬度並使用max-width: 100%; 在你的桌子上。 使用max-width: 100%; in both 意味着它們都可以填滿整個屏幕。

Answer 2

據我所知，“最大寬度：100%；” 意味着寬度不能超過組件所在的整個容器。寬度可以是任何東西並占據整個容器（div 或 table）。 這不會阻止您添加的組件的大小更改容器的大小。

為了解決這個問題，你需要將 max-width 設置為一個實際值（就像你對 min-width 所做的那樣），而不是僅僅讓它占據整個容器（它仍然可以是任何大小）。

希望這可以幫助...

編輯：正如您在之前的評論中所說，嘗試將 max-width 應用於 td 元素而不是整個 table 元素。

Answer 3

您的主要 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%的.chat-messages 。