如何让Firefox正确计算他的孩子是宽度为img的img时的宽度？ （在相对位置包装器中）

Question

我正试图在Firefox和Chrome上一致显示我的画廊。 但首先，它并不像预期的那样......

我强迫图像的高度，让宽度自动。 在两个浏览器上，图像都被正确调整大小...在Firefox上buuut，父元素保持图像的原始宽度而不是自动计算的宽度。

仅当父高度为百分比时才会出现此选项。 如果我把另一个单位像vh，它按预期工作。

为什么Firefox会这样做？ 或者它是PEBKAC ......

 body { display: flex; flex-flow: column; height: 100vh; } .wrapper { flex: 1; position: relative; } .gallery { position: absolute; left: -180px; height: 100%; /* if in vh, the bug disapears! */ display: flex; flex-flow: row; } .item { height: 100%; } .item img { height: 100%; width: auto; } 

 <body> <nav>navbar</nav> <div class="wrapper"> <div class="gallery"> <div class="item"> <img src="https://fakeimg.pl/640x360"> </div> <div class="item"> <img src="https://fakeimg.pl/640x360"> </div> </div> </div> </body> 

https://jsfiddle.net/vwrdf6jx/

在Firefox上可以看到图像之间的空间，Chrome上没有。 尝试垂直调整结果面板的大小以查看Firefox的错误行为。

注意：我需要保留所有这些flex / relative / absolute机器......