CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
PaulG
PaulG

Reputation: 45

Div with style display:table has wrong height

I have a div that wraps a table with style display: table. Table contains div with height:500px http://jsfiddle.net/9ucm7z9h/:

<div style="width: 400px; display: table; background-color: blue;">
    <div style="height: 100px; background-color: green; overflow: scroll">
        <table style="width: 100%;">
            <tr>
                <td>
                    <div id="test" style="height: 500px; background-color: yellow;">&nbsp;</div>
                </td>
            </tr>
        </table>
    </div>
</div>

This code rendered differently in IE and Chrome/Firefox. It is a Chrome/Firefox bug? What can I do to force it rendered as in IE?

Upvotes: 1

Views: 681

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

It seems to be a bug which can be eradicated by triggering the layout somehow.

First of all, the child element of one ruled as display:table might turn into display:table-row or display:table-cell by default, even if not written via the CSS rules. Browsers always try to correct or fix things which obviously here do not work out properly.

Trying to trigger layout using float or display:inline-block here looks like it fixes the misbehavior of the parent displayed as table, at least in Firefox.

http://jsfiddle.net/9ucm7z9h/3/

You can find a bug report here.

Upvotes: 1

Related Questions