nested flexbox optimization

Question

I'm just learning about flexbox, and I'm trying to understand how it works. I have to build a dashboard that has the width and height of the viewport ( no scroll-bar) , a fixed height header, a fixed height footer, and an auto complete height content. The content is composed from a menu with a fixed width, and a preview with an auto complete width and height;

I think this can be done only with nested flexbox like in this example: http://jsfiddle.net/03qLy6zL/9/

html

<div class="header">

</div>

<div class="content">
    <div class="menu"></div>
    <div class="preview"></div>
</div>

<div class="footer">
    footer
</div>

css

html,body {
    height: 100%;
    margin:0px;
    padding:0px;
}


body{
    display:flex;
    flex-direction:column;
}

body > * {
    flex-shrink: 0;
}


.header{
    background-color: yellow;
    height:50px;
}

.content{
    flex-grow: 1;
    display:flex;
    flex-direction:row;
}

.menu{
    background-color: tomato;
    width:300px;
    flex-grow: 0;
}

.preview{
    background-color: lightgreen;
    flex-grow: 1;
}

.footer{
    height:50px;
    background-color:lightblue;
}

Is this the best way to build this, or it can be done without nested flex boxes? Thanks

numerous ways to do it... depends on browsers you need to support also since flex is not supported in all browsers — charlietfl, Jul 03 '15 at 19:00
@charlietfl yes I know flex is not supported in all browsers but I'm targeting only users with latest versions — Doua Beri, Jul 03 '15 at 23:07

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Using just flexbox? Yes, that is probably the only way. If you want to combine flexbox with other methods then a whole lot of other options open up.

There are a ton of sticky footer solutions that work with static footers and headers. Each has their own pros and cons. Here's five pure css versions: 1 - 3, 4 & 5 (there are many more, but that would get you started). They vary from extra markup witht great support to no extra markup with not as great support to, "what the heck is going on but it works, so it must be magic!". Using any of these (not including 5 (the flexbox method - which you already using) would make it so that you no longer have to nest flexbox.

Or you could go the other route and make your internal content use a different method. You could use floats (which could require a clearfix), inline-block (which has it's own issues).

Or, since you aren't worried about content making your page scroll there's a few more options: You could use fixed positioning on the header and footer (though the results would be similar to using a sticky footer). You could also use viewport units.

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  display: flex;
  flex-wrap: wrap;
}
body > * {
  flex-shrink: 0;
}
.header {
  background-color: yellow;
  height: 10vh;
  width: 100%;
}
.menu {
  background-color: tomato;
  width: 300px;
}
.preview {
  background-color: lightgreen;
  flex-grow: 1;
}
.preview,
.menu {
  height: 80vh;
}
.footer {
  height: 10vh;
  background-color: lightblue;
  width: 100%;
}

<div class="header">header</div>
<div class="menu"></div>
<div class="preview"></div>
<div class="footer">footer</div>

All of that aside, since you said you were trying to understand flexbox, none of this probably helps. But if the dashboard is the end result and you don't like the way flexbox is making you do it (I think it's a wonderful solution. It even makes perfect semantic sense, espesially combined with HTML5 tag names.), then there's a few more options.

nested flexbox optimization

1 Answers1

Linked