1592997 - SVG in simple flexbox layout causes incorrect overflow outside parent container

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Steve Lee]

I might be missing somehting but I've researched and tried every possible mark up option to stop this apparent bug with SVG causing flexbox to overflowi.

See ths sanple gist

If it's not clear I expect the SVG to be sized such that it and the container hight does not flow below the main flexbox (eg 100vh - the viewport height). Thus it's height should be the full container height but the width less than full width to keep the aspect ratio correct.

As it is adding the SVG causes overflow.

I addeda few explicit "flex-grow"s but the problem exists without them. I left this exampleas minimal as possible but beleive me I tried everyhting to stop the overflow.

Comment 1

[Steve Lee]

Update: I found if the same problem in the eqivalent grid layout but in that case if I delete the svg wrapper div and set the width and height on the svg element to 100% it works as required. It DOES NOT work if the width and height are set in the CSS which seems wrong as they are suoposed to be equivalent as far as I can tell.

This all seems a bit hacky as I'd expect the flow box' basically "outside in" layout to set the svg viewport correctly.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from reporter)

Comment 3

[Daniel Holbert [:dholbert]]

The testcase renders the same for me in Firefox, Edge, Safari and Chrome (comparing using a maximized window for each).

So it looks very unlikely there's a Firefox-specific bug here. If I'm missing something & you're seeing different behavior in Firefox vs. other browsers, please let me know... But for now, this seems invalid as a Firefox bug.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: adjusted testcase with possible fixes

Here's an amended version of your testcase which may perhaps address your needs.

You had said:

Thus it's height should be the full container height but the width less than full width to keep the aspect ratio correct.

There's nothing in your original CSS to prevent the SVG from being less than the full container height. I had to add max-height:100% to that element and its parent (and min-height:0 on another ancestor) in order to actually express this.

Comment 5

[Steve Lee]

Daniel, thanks for your comments and suggestions. I obviously don’t fully understand flexbox as I expect it to define the layout “outside in” without needing other css (like XUL did) and svg to scale appropriately. When I tried some of my versions I got differing results in chrome.

I’m on holiday for a week so will explore your suggestions and close when I return.

Comment 6

[Daniel Holbert [:dholbert]]

I expect it to define the layout “outside in”

It kind of does, but it also has a content-based minimum size on flex items (which you can override by setting min-height:0 or min-width:0 on whichever axis is the main axis) -- see https://drafts.csswg.org/css-flexbox/#min-size-auto for details on that. This means flex items with lots of content can end up being larger than their flex container, despite being supposedly shrinkable via the flex-shrink property. (Though again, you can prevent this with min-height:0, if you're OK with the content overflowing or being compressed.)

When I tried some of my versions I got differing results in chrome.

If you have any flex-related testcases or URLs where Firefox & Chrome disagree (given the same content & viewport-size), I'd be happy to take a look and see if it's a Firefox bug vs. Chrome bug vs. something more subtle.

(If/when you do post that, please tag me with the Request information from field at the bottom of the bug here, to increase the likelihood that I see it. Thanks!)