Why does the parent div of my image gallery appear too wide on Safari compared to Chrome in Webflow?

When your image gallery's parent div appears too wide in Safari but not in Chrome, it's typically due to differences in how Safari handles flexbox, overflow, or intrinsic sizing.

​

1. Check Overflow Behavior

​

• Safari handles overflow: auto and overflow: hidden differently, especially with flexbox children that have large intrinsic sizes.
• Select the parent div and set its overflow to hidden if it's currently on visible or auto.
• This ensures that any overflowing content doesn’t expand the container unexpectedly in Safari.

​

2. Review Flexbox Settings

​

• If your gallery uses flex layout, verify the parent div’s flex-wrap is set to wrap.
• In Safari, flex-wrap: nowrap can force a single line layout, causing unwanted horizontal expansion if child elements exceed the width.
• Also, check child items' min-width or max-width, as improper settings can break the layout consistency in Safari.

​

3. Check Image Sizing Constraints

​

• Safari is more strict about intrinsic image sizes, especially if images don’t have explicit width settings.
• Make sure your images have a max-width: 100% style and no fixed width that exceeds the container.
• Avoid setting images to display: inline, which can cause layout shifts or extra spacing in Safari.

​

4. Margin and Gap Bugs in Safari

​

• Safari sometimes renders margin or gap spacing differently, especially on flex or grid containers.
• Test removing or adjusting margins and gaps on the child elements to see if the layout normalizes.
• Avoid large negative margins, as these behave differently across browsers.

​

5. Check for Scrollbars or Hidden Content

​

• Enable Safari’s developer tools and inspect whether scrollbars or hidden content are forcing extra width.
• Sometimes Safari reserves space for scrollbars, which widens the parent unexpectedly.

​

6. Verify Webflow Embed or Custom Code

​

• If you’re using custom code (e.g., <script> or inline CSS), ensure none of it injects styles like min-width or adds padding that only affect Safari.
• Custom scripts can render differently between browsers—test by temporarily disabling embeds.

​

Summary

​

The most likely cause is a flexbox or image sizing difference in Safari. Use overflow: hidden, ensure proper max-width settings on images, and confirm flex-wrap: wrap is enabled. Inspect for spacing issues or custom code that may behave inconsistently in Safari.