CSS3 flexbox: flexboxes inside flexboxes aren't contained inside their parents

Question

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!

Answer 1

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!