Я пытаюсь получить постоянное отображение моей галереи в Firefox и Chrome.Но во-первых, это не так, как задумано ...
Я заставляю высоту изображений и разрешаю ширину автоматически.В обоих браузерах размеры изображений корректно изменяются ... но в Firefox родительский элемент сохраняет исходную ширину изображения, а не автоматически вычисляемую.
Это отображается только в том случае, если родительская высота указана в процентах.Если я поставлю другой модуль, например, 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.
Примечание: мне нужно сохранить всю эту гибкость / относительный / абсолютный механизм ...