Fix cross-browser flexbox behavior so accordions open properly

pattern-lab / styleguidekit-assets-default

The static assets for the default StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end.

http://patternlab.io/

MIT License

35 stars 67 forks source link

Fix cross-browser flexbox behavior so accordions open properly #26

Closed sghoweri closed 8 years ago

sghoweri commented 8 years ago

The default flex: 1 shorthand behavior causes the accordion-like panels to remain collapsed and unusable, even when toggled open. Explicitly setting the flex-basis properly to auto (vs the 0 default) fixes the issue.

Haven't dug deep into it but I suspect the flex-basis shorthand default value + the initial calculated height of 0 (when collapsed) may be part of the underlying cause: https://github.com/philipwalton/flexbugs

dmolsen commented 8 years ago

Paging Dr. Frost, paging Dr. @bradfrost. If this PR is good let me know. I'll merge locally and cut a release. Same goes for #27.

Thanks @sghoweri but this is a bit outside my purview to address.

bradfrost commented 8 years ago

Hey @sghoweri, thanks so much for pointing this bug out! I've been shifting a bunch of styles around, so I rolled in your flex: 1 1 auto; fix throughout the style sheet. Thanks again!