Все, что я пытаюсь сделать, это установить 'индикатор выполнения' из Progressbar.js вдоль этого счетчика уровня, используя flex.
Идея состоит в том, что планка расширяетсячтобы заполнить оставшееся место справа после элемента 'level'.
Это работает как шарм во всех браузерах, кроме Firefox.По какой-то причине панель расширяется примерно до 3000 пикселей и разрушает весь макет.
Вот кодовая ручка проблемы.Если вы откроете ссылку в Chrome, Edge или других браузерах, это не вызовет проблем.
HTML
<div class="container">
<div class="profile-grid">
<!-- name and porgress bar -->
<div class="name-prog">
<h1>Joan Manuel Serrat</h1>
<div class="level">25</div>
<div class="progress" id="progress"></div>
</div>
<!-- avatar selection -->
<div class="avatars">
test
</div>
</div>
</div>
Но в Firefox все сломано
Я запускаю все через авторефиксатор, чтобы добавитьвсе правильные префиксы браузера CSS.Все еще ничего.
В Firefox он растягивается на 3000 пикселей вправо и делает весь родительский элемент огромным.
Это проблема со свойствами SVG?
Я пытался использовать встроенный блок, но у меня та же проблема.Единственный способ решить эту проблему - дать всем элементам фиксированную ширину, но это убивает любую «отзывчивость» этого дизайна.