For starters, you don’t need floats. That is the whole point of Flexboxes. So you don’t have to use floats. Try getting rid of the float declarations and playing around some more….
Also, keep in mind that every set of flex items needs a flex container. It’s not ridiculous to see something like:
<div class=”flex-container”> <div class=”flex-item”> <div class=”flex-container”> </div> </div> </div>
Nesting flex boxes is how you keep consistency across browsers but it can get really confusing really quick. Especially when you get like 8 levels deep.
You also are probably missing LOTS of vendor prefixes to get it working properly across all browsers.
For instance, you might want to take a look at the classes that I use in my projects to see what you are missing
.flex-it { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-box-wrap: nowrap; -webkit-box-wrap: nowrap; -webkit-flex-wrap: nowrap; -ms-flexbox-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-row { -moz-box-direction: row; -webkit-box-direction: row; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -ms-flexbox-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-col { -moz-box-direction: column; -webkit-box-direction: column; -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flexbox-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-align-between { -webkit-box-align-content: space-between; -webkit-align-content: space-between; -ms-flex-align-content: space-between; align-content: space-between; } .flex-align-center { -webkit-box-align-content: center; -webkit-align-content: center; -ms-flex-align-content: center; align-content: center; } .flex-align-start { -webkit-box-align-content: flex-start; -webkit-align-content: flex-start; -ms-flex-align-content: flex-start; align-content: flex-start; } .flex-align-item-start { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -moz-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; } .flex-align-item-center { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .flex-start-all { -webkit-box-pack: justify; -webkit-justify-content: flex-start; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: flex-start; -webkit-box-align: flex-start; -webkit-align-items: flex-start; -moz-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-align-content: flex-start; -webkit-align-content: flex-start; -ms-flex-align-content: flex-start; align-content: flex-start; } .flex-align-item-stretch { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .flex-justify-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: space-between; } .flex-justify-center { -webkit-box-pack: justify; -webkit-justify-content: center; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: center; } .flex-justify-start { -webkit-box-pack: justify; -webkit-justify-content: flex-start; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: flex-start; } .flex-justify-end { -webkit-box-pack: justify; -webkit-justify-content: flex-end; -ms-flex-pack: justify; -moz-box-pack: justify; justify-content: flex-end; } .flex-wrap { -moz-box-wrap: wrap; -webkit-box-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flexbox-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-item-auto { -webkit-box-basis: auto; -webkit-flex-basis: auto; -ms-flex-basis: auto; flex-basis: auto; -webkit-box-flex: 1; /* OLD – iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD – Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1 0 auto; /* IE 10 */ flex: 1; }