search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

Nested flex containers results in flex container being drawn far off from where expected #199

Closed jogjayr closed 7 years ago

jogjayr commented 7 years ago

Sorry I can't really express this too well in words. Fortunately, I have pictures. And a fiddle

Chrome

screen shot 2017-02-07 at 12 13 15 am

IE (tested on a win7, IE 11 VM)

No I haven't missed anything; that second container is being drawn way off to the right

screen shot 2017-02-07 at 12 14 39 am

The nested flex container is being drawn way too far to the right.

Known workaround: Don't have nested containers with a flex style rule?

Sorry if this has already been filed or the workaround isn't generalizable.~~

philipwalton commented 7 years ago

Known workaround: Add a unit to the flex shorthand for flex grow or flex shrink for the class col22 in the example.

Unfortunately that's not really a workaround. Doing that would just make the entire declaration invalid and thus dropped.

jogjayr commented 7 years ago

Yeah, I realized that after getting to work the following day and actually trying it (as opposed to button mashing in the developer console). I don't have a known workaround for this issue, but (at least in my case) was able to avoid the need for nested flex declarations in my app and thereby sidestep the issue. I'll update my original report to remove the workaround.

agnellvj commented 7 years ago

@jogjayr Try changing flex: 1 1 0px to flex: 1 1 auto

That worked for me with Win8.1+IE11.

philipwalton commented 7 years ago

I'm closing this due to inactivity in the interest of not having so many inactive, open issues. Please feel free to comment if new information comes to light.