Streaming live at 10am (PST)

Flexbox images fall outside parent element (firefox only)


#1

Hi,

Running the latest version of Firefox.

Just used Flexbox for the first time.

Made a containing div of 1200px flexible.

Added 3 div blocks and in each of them placed an equally sized image.

They spaced out perfectly and on publishing it all looks great in Chrome, Safari and Opera but on Firefox...

The images burst out of the container and disappear off the screen. I re-created the problem on another site and it did exactly the same.

https://preview.webflow.com/preview/business-capital-on-demand?preview=c69a9ec71e4923be70758fafdca0837f


#2

Give the same class to all your container divs.

Now give them some Flexbox Child settings. Here, I tend to reproduce your bug, it seems that Firefox uses a "Don't Shrink Sizing.

When what you probably want it a Shrink if needed, which should be the default when nothing is specified (I was under this impression)

Can you try this, or other Flexbox Childs options, to see if it solves it?


#3

Hi Vincent,

I did as you recommended but nothing makes it shrink on Firefox. :frowning:


#4

What's the url so I can look? Can't figure it out


#5

Hi Vincent,

The URL is as per my first post as we are still in development with this one...

https://preview.webflow.com/preview/business-capital-on-demand?preview=c69a9ec71e4923be70758fafdca0837f

or

http://business-capital-on-demand.webflow.io/

Thanks for looking into this.


#6

can you believe I've been trying with "weblow" for 5 minutes?


#7

I believe anything these days! That's nothing compared to me!! :wink:


#8

Okay, interesting, i fiddled with it in Firebug but there are things I don't fully understand yet.

So in the meantime just let it as it is and give a width:33.33% to the top-image-wrapper and that fixes it.


#9

Hey,

Yeah, that's what I had originally before I stripped it out to make it 'flex' ible as this was supposed to stop all this percentage width div stuff.

How ironic.

Do you think it is a Firefox issue, a Webflow issue or a Flexbox issue?

Cheers as always Vincent.


#10

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