Firefox understands "display:table-cell; vertical-align:bottom;" differently

Question

I have a table containing several spans. I set the height of these span dynamically and work in percentages (a sort of bar chart). The container of these spans has a fixed height and I need it to remain very much fixed. I also need them to be rendered from bottom up, therefore I set on the container display:table-cell; vertical-align:bottom;. When the total percentage of the heights is greater that 100%, the content needs to stay hidden. Chrome, Internet Explorer and Opera (the Chrome-like version...) "hide" the content but Firefox changes the hight of the table cell/container(JSFiddle).

Setting the container to display:block; solves the "height growth" problem but does not allow the inner spans to be bottom-up rendered.

How can I "fix Firefox"?

HTML structure:

<hr/>
<table>
    <tbody>
        <tr>
            <td> 
                <span class="holder">
                    <span id="first"></span>
                    <span id="second"></span>
                    <span id="third"></span>
                    <span id="forth"></span>
                </span>
            </td>
            <td> 
                <span class="holder">

                </span>
            </td>
        </tr>
    </tbody>
</table>
<hr/>

CSS ("minified" to save space):

td { width:90px; overflow:hidden; padding:0px; background-color:yellow; }
td span.holder { width:89px; height:100px; border:1px solid black; padding:0px;
    background-color:green; display:table-cell; vertical-align:bottom; }
span.holder span { display:block; border:1px solid black; }
#first { height:30%; background-color:red; }
#second { height:30%; background-color:blue; }
#third { height:20%; background-color:yellow; }
#forth { height:30%; background-color:cyan; }

Edit: In this example, the total percentage equals 110% (with respect to the height of the holder span). Part of the content does not and should not be displayed. Chrome, Internet Explorer and Opera "hide" part of the first span, while Firefox expands the holder parent to fit the content.

Answer 1

vertical-align does not matter much here.

You are using display:table-cell; for span.holder. Now, that results in a table-cell inside a table-cell. What happens from there?

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

So, your table-cells actually contain tables themselves, and those tables have one row and one column each.

Let's concentrate on this "table":

 <!-- (anonymous table) -->
     <!-- (anonymous tbody) -->
         <!-- (anonymous table-row) -->
            <span class="holder"><!-- table-cell -->
                <span id="first"></span>
                <span id="second"></span>
                <span id="third"></span>
                <span id="forth"></span>
            </span>

Fiddle

Now, how are the heights of these elements calculated?

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height).

http://www.w3.org/TR/CSS21/tables.html#height-layout

Now, we have height = 100px, MIN = 110px + 8px. So, I think that Firefox is right, even though the specs are not very clear about how exactly MIN is determined. Update: I found it: "If any of the remaining cells, those aligned at the bottom or the middle, have a height that is larger than the current height of the row, the height of the row will be increased to the maximum of those cells"

As a "fix", use display:block; on .holder