I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change. I can ho… (read more)
I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change. I can horizontally stretch parts certain parts of the image without causing aspect ratio issues while leaving the other parts constant.
The issue is that, specifically in firefox, a seam is visible between the adjacent SVG images:
flex: 0 0 auto;
flex: 10 10 auto;
flex: 5 5 auto;
Here is a live demo showing the flexbox with padding and without: https://codepen.io/ScottMastro/pen/mdpmwEyblondedata
I think this might be just an unavoidable feature of firefox so I've given thought to workarounds. If I can horizontally stretch the second and fourth segments of the image slightly beyond the boundary of their div containers, it will prevent a seam. I have not been able to come up with CSS capable of doing this.