Mihail Shishkov Mihail Shishkov - 4 months ago 9
CSS Question

Firefox does not display table-row as Chrome and Internet Explorer

Given the following code


<div class="ci-v-stack-panel" style="width: 400px; height: 500px; border: 1px dashed green;">
<div id="white" class="ci-v-panel">
<div style="height: 50px">
<span>content 0</span>
<div id="red" class="ci-v-panel">
<span>content 1</span>
<div id="green" class="ci-v-panel">
<span>content 2</span>
<div id="blue" class="ci-v-panel auto">
<span style="border: 1px dashed black;">content 3</span>


#white {
background-color: white;

#red {
background-color: red;

#green {
background-color: green;

#blue {
background-color: blue;
color: white;

.ci-v-stack-panel {
display: table;
table-layout: auto;

.ci-v-panel {
display: table-row;
height: 0 !important;
width: 100% !important;

.auto {
height: auto !important;

I got the following results:
enter image description here
Check it out on codepen: http://codepen.io/mcl7cdm/pen/BzjqQq

The last browser is Firefox.

What should I do in order to make it look the same in Firefox?


Give the height a unit and a value bigger than 0

.ci-v-panel {
    display: table-row;
    height: 1px;
    width: 100%;