Link to home
Start Free TrialLog in
Avatar of Colin Brazier
Colin BrazierFlag for United Kingdom of Great Britain and Northern Ireland

asked on

flex div overflows its container

http://www.col-b.uk/FOBG/

Please view >800px wide.

My list of ads on the right hand side is overflowing its container at the bottom, as seen here .  User generated image
I have tried flex-flow: row wrap but that doesn't work, and tried various height/min-height/max-height settings.

Any help appreciated.

 Col
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Colin Brazier

ASKER

Not much wrong then!  Originally I just had "#sidebar12" which contained the search box, the "support our sponsors" h2, and all the ads.  But on long pages these were being spread down the page, so the sponsors heading was too low.  I wanted the search box, the "support our sponsors" h2, and the first ad to be at the top, and the other ads distributed evenly down the bottom.  So I introduced the wrapper for the ads ("#sidebar_ads") which complicated things.

Your solution works fine, thanks very much.  But can I ask why "flex: 80 1 auto"?

Cheers,  Col
You're welcome.

Yeah, flex does get complicated, especially when adding it in later.

The "flex: 80 1 auto" sets "flex-grow" to a high value. In this case it doesn't need to be that high, since all its siblings have the default value of "0", meaning they won't be extended to fill unused room in the container. (The "flex-grow" property could be used instead of "flex" except IE10 supports the "-ms-flex" property but not "-ms-flex-grow". Also IE11 supports them unprefixed, so there's no reason to ever use "-ms-flex-grow".)

https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Thanks again.