Streaming live at 10am (PST)

Flex Box Issues :0

I love Flex Box features but seem to run into issues here and there. Wondering if there are some general rules to keep in mind when using?

I was having trouble when placing a slider into a Flex Box div. Doing so would always cause unwanted results with the slider. I was able to resolve these issues by first placing a div within my Flex Box element, styling that div with a 100% width, then placing the slider inside of it. This seems to have resolved the issue, but I’m wondering if it’s a bad practice overall to insert elements like sliders, tabs, etc. into Flex Box elements? I saw some other people post similar issues but no real answers. Also saw issues with having Flex Box elements inside of sliders and tabs. Also (also) I always remove all Flex Box styles on phone queries because they do not work in Safari for iPhone. Any other scenarios users have run into? Might be nice to add a list of “do nots” and/or work-arounds on the Flex Box user-guide page. Could help users from making common mistakes.

You can see the area in question in my preview (below). “Process” slider.

This is how it’s set up:

  1. I have an outer div set to 80vh (fills browser 80%)
  2. I applied Flex Box to this div
  3. I set the Flex Box child elements to “Align Center” vertically.
  4. I inserted a headline and a slider into the Flex Box div but the slider essentially breaks.
  5. I then placed a new div inside the Flex Box element and style it with a 100% width.
  6. I put my slider into this new 100% width div. (and everything works fine)

My Preview link:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.