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:
- I have an outer div set to 80vh (fills browser 80%)
- I applied Flex Box to this div
- I set the Flex Box child elements to “Align Center” vertically.
- I inserted a headline and a slider into the Flex Box div but the slider essentially breaks.
- I then placed a new div inside the Flex Box element and style it with a 100% width.
- I put my slider into this new 100% width div. (and everything works fine)
My Preview link: https://preview.webflow.com/preview/joel-adams?preview=336b7dc9cf5e9c1322cfacf802b7e0b5