NO BUG: flex-grown and flex-shrink not applied to SVGs with a link

SACABC · August 1, 2025, 10:46am

Browser: Firefox 141.0
OS: Windows 11

Since the SVG gets wrapped in an <a> tag when you add a link to it, the flex-grow and flex-shrink properties (and probably other properties affecting layout) don’t carry over to that <a> tag.

Explanation Video

Steps to recreate:

Create a container with a flexbox.
Add SVG and another piece of content
Set SVG flex-grow and flex-shrink to 0
Test it (it works like it should; doesn’t shrink)
Add a link to the SVG
Test it again (it previews fine in the builder, but the frontend output is not)

I’ve added this to the SVG’s Custom CSS to fix it:

a:has(> %root%) {
  flex-grow: 0;
  flex-shrink: 0;
}

timmse · August 1, 2025, 11:25am

Hi Max,
Thanks so much for your report, and welcome to the forum!

I can replicate the problem, but wouldn’t consider it a bug. The style properties apply to the “most relevant” node, which is the SVG. There are probably many other settings that need to be applied to the SVG despite the link. The difficulty here is to have every conceivable scenario in mind, which is simply impossible without introducing more problems.

Your CSS solution is a good approach Alternatively, you can wrap the SVG manually with a div and add the link there. Then you can deliberately set flex-grow/shrink on the link and have full control.

Best regards,
timmse