Firefox не отображает таблицу-строку в Chrome и Internet Explorer

Question

Учитывая следующий код

HTML:

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

я получил следующие результаты: Проверьте его на код: http://codepen.io/mcl7cdm/pen/BzjqQq

Последний браузер - Firefox.

Что делать, чтобы он выглядел одинаково в Firefox?

Answer 1

Дайте height блок и значение больше 0

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