Background Colour Not Filling Div

For an example I want my wrapper div to have a red background color and it will fill down as other divs are placed inside it. However since it is centered using margin: auto; and

Solution 1:

The workaround is to put a div inside that div...

Like this...

<divid="container"><divid="colordiv"><div></div><div></div><div></div></div></div>

Where container is an auto margined 'container', and the color div is 100% color fill for that container.

This way you can make the main container any width, the rest will follow, and the color continues as far as the content

DEMO HERE

ANOTHER DEMO - smaller divs

As for your overflow question....Im not sure at all why thats the case

Solution 2:

display: flex will allow the background to fill in the same way as the ellusive overflow: hidden does.

You then have to contend with:

• Margins not collapsing - if that's important to you
• Setting alignment, which if you have an existing layout may be trivial or complex

Note: One disadvantage of overflow: hidden is it breaks sticky positioning.