table-cell width gets larger as width property gets smaller - css

Question

I have the following code:
<div style="display: table; border: 1px solid green;">
<div style="display: table-cell; width: 1%; max-width: 1000px; background: red; height: 30px;"></div>
</div>
Changing the width property has completely counter-intuitive consequences.
A bigger example of this behavior: http://jsfiddle.net/8DUfr/2/. How is the width of the red rectangle calculated?

Answer 1

You were using width: percentage%; in the wrong div. You put it in the parent div for each red bar. I fixed your JSFiddle.
http://jsfiddle.net/8DUfr/4/
<h3>1%</h3>
<div style="display: table; border: 1px solid green; width: 1%">
<div style="display: table-cell; max-width: 1000px; background: red; height: 30px;"></div>
</div>

Answer 2

The box model in CSS has traditionally worked this way:
Given width w, the actual visible width of the box is calculated by adding w to the left and right padding of the element plus the left and right border. The width specified via the CSS width property, in modern browsers only tells CSS how wide the content area should be. See W3C documentation for an example.
For illustration purposes, let's say you have the following:
HTML
<div class="box">Something here</div>
CSS
.box {
width: 100px;
border: solid 1px red;
padding: 2px;
}
The visible width of .box is actually: 100 + 2 * 1 + 2 * 2 = 106px. To make the box measure exactly 100px, you have to subtract 6px from the specified width to compensate.
HTML
<div class="box-adjusted">Something here</div>
CSS
.box-adjusted {
width: 94px;
border: solid 1px red;
padding: 2px;
}
With the advent of CSS3, we now have the box-sizing property. The value that makes the width work as we expect is border-box.
HTML
<div class="box2">Something here</div>
CSS
.box2 {
width: 100px;
border: solid 1px red;
padding: 2px;
box-sizing: border-box;
}
See fiddle: http://jsfiddle.net/nnN6t/3/