Влияние максимальной ширины на размер таблицы-ячейки

Question

Вот jsfiddle, где вы можете увидеть клетки расширяющиеся за пределами их контейнера (или расширяющие размер таблицы, когда это происходит с таблицами), потому что:

1. из длинное слово, даже если «перенос слов: брейк-слово» устанавливаются
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); 
} 

Эта проблема может быть исправлена ​​путем добавления «макс-ширина: 0» до .leftBlock, результат которого можно увидеть здесь: http://jsfiddle.net/CyberAP/NUHTk/103/

Эта же проблема и исправить может возникают при работе со столами.

Это похоже на хак. Мои вопросы:

1. почему max-width: 0 решить проблему.
2. Почему и как это изменяет поведение размера ячейки.
3. Я думаю, почему это не по умолчанию?

Answer 1

Вы можете добавить: стол; и таблица-макет: привязаны к классу контейнера. Надеюсь, это решит вашу проблему.