Flexbox won't keep the flex child at 100% width on ultra wide

vtron · June 19, 2022, 2:23pm

Trying to wrap this portfolio when I noticed a slight imbalance on resolutions higher than about 2000px. This is what really happens. The scaling of the projects looks good until that point, then just won’t scale to 100%, leaving a few pixels gap, the left column going lower that the right one.

I tried a few solutions found here, but the image will fill for a few seconds the container then it will snap back at save or publish.

EDIT: It might not happen in the read-only link share, so here’s also the published website: https://emm-933c3c.webflow.io/

Here is my site Read-Only: https://preview.webflow.com/preview/emm-933c3c?utm_medium=preview_link&utm_source=designer&utm_content=emm-933c3c&preview=30f6083c6277969746d26b6ebcbfa498&workflow=preview

Daniel-Servica · June 19, 2022, 3:10pm

My suggestion would be:

Set the img and parent of to width: 100% and it will always fill that parent(Not max)
For the project grid gap also do a calculation, instead of 40px type: “40/16em enter” which will take into account your base size resulting in 2.5em and make things more adaptive.

but if you want the whole thing to scale better use modern units.

like so