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

Question

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

即使设置了“自动换行：破解字”，
1. 也是一个长字。
即使设置了“overflow：hidden”，也是一个大div的

2. 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：固定到容器类。希望这能解决你的问题。