Display issue when parent element is using display: inline-flex or display: flex

[tmszb]

Hi,

There is an issue when using range slider when a container has display: inline-flex or display: flex CSS rule.

When this happens range slider's width looks like it would be set to 0. Elements are displayed but are squeezed.

I used exisiting example from contributing guidelines here: https://jsfiddle.net/IonDen/b79q0vnm and added display: inline-flex to show this behavior: https://jsfiddle.net/16jvpk8d/

[tmszb]

This is how it looks:

[tmszb]

FYI - I found a workaround.

Setting flex-basis with a value of own choice on .irs class seems to fix the issue.

The other solution is to use width: 100% on the same class but only if it is set to 100%. Other values causes another unexpected behavior.

I am not sure however if any of the above solutions affects different scenarios of using this range slider.