Colin Brazier
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 .
I have tried flex-flow: row wrap but that doesn't work, and tried various height/min-height/max-heig ht settings.
Any help appreciated.
Col
Please view >800px wide.
My list of ads on the right hand side is overflowing its container at the bottom, as seen here .
I have tried flex-flow: row wrap but that doesn't work, and tried various height/min-height/max-heig
Any help appreciated.
Col
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
ASKER
Thanks again.
ASKER
Your solution works fine, thanks very much. But can I ask why "flex: 80 1 auto"?
Cheers, Col