I am faced with getting a rather complex web app to work in HTML/CSS. I am finding many issues with the flexbox, which seems like it would solve my problems. I’m trying to understand what I’m doing wrong or what the flexbox limitations are. I am only working in Chrome so that helps.
I keep seeing two issues:
– the boxes don’t understand how to accommodate heights/widths of children contained inside
– child boxes aren’t contained by parents. Image of this issue:
Instead of posting code here is a JSFiddle: http://jsfiddle.net/dex3703/ryCQq/
Isn’t fully complete but you get the idea I hope. The CSS is combined from three different files.
Thanks!
Figured it out. All containers must be set to display: box (or -webkit-box, etc). If you want a box inside a box, they all must be boxes. Hope this helps someone!