显示表布局在Firefox中损坏

Question

在所有主流浏览器（Chrome / Safari / IE / Edge）和Firefox中都对此进行了尝试。在除Firefox以外的所有环境下均可正常工作。

.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}

<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p>  <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
  <a href="/shop"><button class="colour-dark-pnk">Order now</button></a></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>

FF中的外观：

更奇怪的是，一旦使用“检查元素”，问题就消失了，这意味着很难看到正在发生的事情。看起来像是实际的浏览器错误？

Answer 1

http://jsfiddle.net/c3bfzLhj/

将所有height:100%更改为min-height:100% 这是Firefox错误。两周前，我在使用Web应用程序时遇到了这个问题。