CSS3 Flexible Box Model and nested layouts

I've been playing a little bit with CSS3 flexib开发者_StackOverflow社区le box model as described in this article: CSS 3 Flexible Box Model

I am trying to create a simple vbox with a nested hbox, something like this:

<div class="vbox">
    <div>Header</div>
    <div class="hbox">
        <div>Section 1</div>
        <div>Section 2</div>
        <div>Section 3</div>
    </div>
    <div>Footer</div>
</div>

However the content of the hbox is being laid out vertically and not horizontally. What am I doing wrong and how to do it correctly? Thanks.

The problem is that the display: box; declaration in the .hbox rule gets overridden by the display: block; in the .vbox > * rule. You have two options:

1 Make the display: box override the more specific rules:

.hbox {
    display: -webkit-box !important;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box !important;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box !important;
    box-orient: horizontal;
    box-align: stretch;
}

Approach 1 working example here, the main disadvantage of this approach is that you're messing with the default specificity rules of CSS which may cause confusion in other places.

2 Remove display: block from the more specific rules:

.vbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

Approach 2 working example here, the main disadvantage of this approach is that you'll need all direct children of an .hbox or .vbox to be block level elements.