We control overflow of a cell of the table by means of max-width

Suppose we want to make a two-column layout using the table-cell property. The left column will occupy all available width, the right one may have two options in our case:

• we will give this column a fixed width;
• it will be equal to the minimum content width → minimum content width (MCW) .

The layout method on the columns has one significant minus → if the content inside the block goes beyond its scope, then the restriction set via width will not affect it, because MCW is more in this case. If we want to stretch the left column across the entire width, then we will have to set its width to 100%. Accordingly, max-width: 100%; will not give any result, because MCW and so above this value. As a result, our entire layout will stretch and go out of the container, whatever restrictions we set.
')
Here is an example of the layout with the option of a fixed column on the right:

<div class="container"> <div class="leftBlock">   </div> <div class="rightBlock">   </div> </div> 

 .leftBlock, .rightBlock { display: table-cell; vertical-align: top; } .leftBlock { width: 100%; } .rightBlock { width: 200px; max-width: 200px; min-width: 200px; } 

Jsfiddle example

As we see, there are no problems so far. Now add elements to the left column that will exceed the width of the container minus the column on the right:

Jsfiddle example

The cell on the left stretched out despite the limited width of the container, a scroll appeared. It's time to introduce the hack. As I said earlier, max-width: 100%; will have no effect here, but if we specify max-width: 0; then the cell will occupy the entire width available, taking into account the width of the container and the cell to the right. Unfortunately, there is no specification in the specification about this effect, but it works the same in all browsers.
Do not forget to add the left column overflow: hidden; and word-wrap: break-word ;, otherwise the contents will crawl out of the container.

Final jsfiddle example

In the second version, with an unfixed right column, everything will be exactly the same, only without specifying any width parameters.