Как заставить SVG заполнять родительский div в Firefox?

Question

[softshape]

Вот такой SVG был сделан, чтобы полностью заполнять родительский элемент и быть adaptive, то есть менять ширину при ресайзе браузера -

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2250 160" preserveAspectRatio="none" 
vector-effect="non-scaling-stroke" style="width: calc(100% - 50px); height: 160px">

При ширине родителя в 500px ширина SVG равна 100%-50px = 450px. Во всех браузерах, кроме Firefox.

В Firefox он нормально растягивается если например viewBox="0 0 150 160", а вот сжиматься не хочет - при viewBox="0 0 2250 160" его ширина будет равна 2200 точек независимо от ширины браузера.

Это вообще лечится?..

Comments

[ⓒⓢⓢ]

не совсем понятно, но как пример
jsfiddle.net/kja9twnr

[softshape]

JRK_DV, спасибо! Оно заработало, когда я тоже выставил контейнеру position: absolute и т.д. как у вас в примере. У меня за растягивание контейнера отвечал атрибут flex:1, возможно проблема была из-за него.