Firefox nicht table-row wie Chrome und Internet Explorer

Question

mit dem folgenden Code

HTML anzuzeigen:

<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> 
    </div> 
    <div id="red" class="ci-v-panel"> 
     <span>content 1</span> 
    </div> 
    <div id="green" class="ci-v-panel"> 
     <span>content 2</span> 
    </div> 
    <div id="blue" class="ci-v-panel auto"> 
     <span style="border: 1px dashed black;">content 3</span> 
    </div> 
</div> 

CSS:

#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; 
} 

Ich habe folgende Ergebnisse: Überprüfen Sie es auf Codepen: http://codepen.io/mcl7cdm/pen/BzjqQq

Der letzte Browser ist Firefox.

Was soll ich tun, damit es in Firefox gleich aussieht?

Answer 1

Geben Sie die height eine Einheit und einen Wert größer als 0

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