3

I'm having some issues with nested flexbox in Safari, IE11 & IE10. The panels are supposed to be side-by-side (50% width), and have varying amounts of content in them. The <cite> element should be anchored to the bottom of the panel and each panel should be the same height.

Here's a codepen to illustrate: http://codepen.io/anon/pen/BKNRBY

This works fine in Chrome / Firefox, but in Safari, IE10 and IE11, the panels don't stretch vertically to contain their content.

Can anyone offer any advice?

8three
  • 661
  • 1
  • 5
  • 10
  • As a first step, consider browser compatibility. Safari < 9 and IE10 require vendor prefixes. IE11 has issues that need to be addressed, as well. http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Mar 02 '16 at 18:51
  • The pen is using autoprefixer to handle vendor prefixes. – 8three Mar 02 '16 at 18:55
  • Good to know. It wasn't apparent in the code itself. The link I posted above also contains references to common browser bugs and workarounds. – Michael Benjamin Mar 02 '16 at 18:56

1 Answers1

6

Found it, switching the rule from flex-basis: 100% to flex-basis: auto on the blockquote did the trick.

8three
  • 661
  • 1
  • 5
  • 10