max-width: 100% not working

Question

I am trying to do a chat-like thing, which has the following structure:

<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>

Also, I have the following 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%;
}

The problem with this all, is that the max-width property doesn't work on neither table, nor tbody. The contents of td make the whole structure up to table expend its width beyond the maxwidth, which should be 100% of width of the topmost div. No matter what I do, or what I try to search in google, I can't find the solution to this. Perhaps there's something with higher priority than max-width?

Also, I am using chrome.

Answer 1

The max-width property prevents the element from exceeding the width of its parent, so you can set a certain width to the table container class chat-messages and use max-width: 100%; in your table. Using max-width: 100%; in both means that they can both fill the whole screen.