How can I make a div in Webflow wrap its content and not take up the full width of the block, specifically when it contains a row of images?

If you want a div in Webflow to wrap its content and not take up the full width, particularly with a row of images, here's how you can achieve that:

​

1. Set Up Your Div Block

• Select the div you want to adjust.
• Ensure that the div is properly containing your images.

​

2. Adjust Div Width

• Go to the Style panel for the selected div.
• Under the Size section, set the Width to 'Auto'.
• Ensure that the Height is also set to 'Auto' to adjust dynamically with the content.

​

3. Enable Flexbox

• Scroll down to the Layout section in the Style panel.
• Change the display setting to Flex.
• Set the Direction to 'Row' to keep your images in a horizontal line.

​

4. Adjust Flex Properties

• Set the Justify property to 'Start' to align the items to the left.
• Set Align to 'Center' if you want the images centered vertically within the div.

​

5. Handle Image Wrapping

• Make sure the images have their width set to ensure they wrap correctly, or set them to a percentage for more fluid layouts.

​

6. Check Margins and Padding

• Adjust the div's padding and margins to ensure there's no unnecessary space making it take up more width than necessary.
• Check the surrounding elements for any margin/padding that might affect this div's width.

​

Summary

To make a div in Webflow wrap content and not occupy the full width, set its width to 'Auto', use Flexbox for layout management, and ensure images and other content have appropriate sizing settings. This configuration will maintain the content's natural width without expanding the container unnecessarily.