How can I make a Div Block take full width within a parent element using Webflow, specifically when the parent element's width is set to a maximum of 1100px and the layout display is set to flexbox?

To make a Div Block take full width within a parent element in Webflow, especially when the parent has a max-width of 1100px and uses flexbox, follow these exact steps.

​

1. Ensure Parent Element Settings

​

• Set the parent element's max-width to 1100px under the Style panel.
• Make sure its Display setting is set to Flex, with flex-direction set to Vertical (Column) unless you want items to lay out horizontally.
• Confirm Align and Justify settings are not restricting the child’s size (e.g., avoid "Center" if you want full width).

​

2. Set the Div Block to 100% Width

​

• Select the child Div Block inside the flex parent.
• In the Style panel, set the Width to 100%.
• Make sure Max Width and Min Width are not set (or leave at default) unless you need overrides.
• Ensure Display is set to Block, Flex, or anything other than Inline so it respects width settings.

​

3. Check Margin and Padding

​

• Remove any default left/right margin or padding on the Div Block that might cause it to appear narrower.
• If parent has padding, the 100% width will respect that padding — it's 100% of the padded content area.

​

4. Optional: Container Cleanup

​

• If you used a Webflow Container component instead of a custom div with 1100px max-width, note that Containers have predefined padding and max-widths. Consider replacing it with a custom div for full control.

​

Summary

​

To make a Div Block take full width inside a 1100px max-width flex parent: set the Div’s width to 100%, ensure it’s not restricted by margins or padding, and check that the flex parent uses a vertical layout (Flex Column) unless you are intentionally laying items horizontally.