最大宽度对表格单元格大小的影响

Question

这是一个 jsfiddle，您可以在其中看到单元格在其容器之外扩展（或在表格发生这种情况时扩展表格的大小），因为：

1. 即使设置了“word-wrap: break-word”也是一个长单词
2. 即使设置了“溢出：隐藏”也是一个大 div

http://jsfiddle.net/NUHTk/166/

<div class="container">
    <div class="leftBlock">
       Too-much-text-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
    </div>
    <div class="rightBlock">
        Right block content
    </div>
</div>

<div class="container">
    <div class="leftBlock">
        <div style="width: 1200px; height: 200px;">
            Huge element
        </div>
    </div>
    <div class="rightBlock">
        Right block content
    </div>
</div>

CSS

.container
{
    width: 500px;
    padding: 10px;
    margin: 20px auto;
    background: rgb(255,240,240);
}

.leftBlock, .rightBlock
{
    display: table-cell;
    vertical-align: top;
}

.leftBlock
{
    width: 100%;
    //max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
    background: rgb(240,255,255);
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
    background: rgb(200,200,200);
}

可以通过在 .leftBlock 中添加“max-width: 0”来解决此问题，其结果可以在此处看到： http://jsfiddle.net/CyberAP/NUHTk/103/

在处理表格时可能会出现同样的问题和修复。

这感觉就像一个黑客。我的问题是：

1. 为什么 max-width: 0 可以解决问题。
2. 为什么以及如何改变单元格大小的行为。
3. 我猜，为什么这不是默认行为？

Answer 1

你可以添加 display:table;和 table-layout:fixed 到容器类。希望这能解决您的问题。