CSS flexbox. Achieve this grid on Safari 6

Question

I read that Safari 6 has partial support for flexbox but I am not exactly sure what is missing.

My goal is to create a grid that has the possibility of fixed side columns mixed with liquid columns.

e.g:

| 256px fixed width | this column has width:100% and spans rest of space |

Here is an example working in latest stable Chrome, FF, Opera, IE10. Unfortunately this fails in Safari 6 though which seems to completely ignore the flexbox stuff.

Is there some css tweak I can make to get it working, or an alternative?

Demo/code: http://dominictobias.com/grid/with-fixed.html (< 767px it will stack, which AFAIK is not achievable without flex when mixing liquid and fixed columns)

css:

body {
    margin: 0;
}
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
.row { 
    width: 2560px; 
    max-width: 100%; 
    min-width: 320px; 
    margin: 0 auto;
}
.row.fixed {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.row .row { 
    width: auto; 
    max-width: none; 
    min-width: 0; 
    margin: 16px -16px; 
}
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.row .col { 
    position: relative;
    float: left;
    min-height: 1px;
    padding: 16px;
}

.row .span-1 { width: 4.167%; }
.row .span-2 { width: 8.333%; }
.row .span-3 { width: 12.5%; }
.row .span-4 { width: 16.667%; }
.row .span-5 { width: 20.833%; }
.row .span-6 { width: 25%; }
.row .span-7 { width: 29.167%; }
.row .span-8 { width: 33.333%; }
.row .span-9 { width: 37.5%; }
.row .span-10 { width: 41.667%; }
.row .span-11 { width: 45.833%; }
.row .span-12 { width: 50%; }
.row .span-13 { width: 54.167%; }
.row .span-14 { width: 58.333%; }
.row .span-15 { width: 62.5%; }
.row .span-16 { width: 66.667%; }
.row .span-17 { width: 70.833%; }
.row .span-18 { width: 75%; }
.row .span-19 { width: 79.167%; }
.row .span-20 { width: 83.333%; }
.row .span-21 { width: 87.5%; }
.row .span-22 { width: 91.667%; }
.row .span-23 { width: 95.833%; }
.row .span-24 { width: 100%; }

.row .fixed-256 { 
    -webkit-flex: 1 256px;
    -moz-flex: 1 256px;
    -ms-flex: 1 256px;
    flex: 1 256px;
}

.row .fixed-content { 
    -webkit-flex: 1 99 100%;
    -moz-flex: 1 99 100%;
    -ms-flex: 1 99 100%;
    flex: 1 99 100%;
}

.row .offset-1 { margin-left: 4.167%; }
.row .offset-2 { margin-left: 8.333%; }
.row .offset-3 { margin-left: 12.5%; }
.row .offset-4 { margin-left: 16.667%; }
.row .offset-5 { margin-left: 20.833%; }
.row .offset-6 { margin-left: 25%; }
.row .offset-7 { margin-left: 29.167%; }
.row .offset-8 { margin-left: 33.333%; }
.row .offset-9 { margin-left: 37.5%; }
.row .offset-10 { margin-left: 41.667%; }
.row .offset-11 { margin-left: 45.833%; }
.row .offset-12 { margin-left: 50%; }
.row .offset-13 { margin-left: 54.167%; }
.row .offset-14 { margin-left: 58.333%; }
.row .offset-15 { margin-left: 62.5%; }
.row .offset-16 { margin-left: 66.667%; }
.row .offset-17 { margin-left: 70.833%; }
.row .offset-18 { margin-left: 75%; }
.row .offset-19 { margin-left: 79.167%; }
.row .offset-20 { margin-left: 83.333%; }
.row .offset-21 { margin-left: 87.5%; }
.row .offset-22 { margin-left: 91.667%; }
.row .offset-23 { margin-left: 95.833%; }
.row .offset-24 { margin-left: 100%; }

.show-grid .row {
    margin-bottom: 16px;
}

.show-grid .col {
    background-color: #eee;
    border: 1px solid #ddd;
    background-color: rgba(70,61,180,.15);
    border: 1px solid rgba(70,61,180,.2);
}

@media only screen and (max-width: 767px) {
    .row { 
        width: auto; 
        min-width: 0; 
        margin-left: 0;
        margin-right: 0;
    }
    .row.fixed {
        display: block;
    }
    .row .col {
        width: auto !important; 
        float: none;
        margin-left: 0;
    }
    .row .col:last-child { 
        float: none; 
    }
    .row .col:before,
    .row .col:after {
        content: " ";
        display: table;
    }
    .row .col:after {
        clear: both;
    }
}

html:

<div class="row">
    <div class="col span-16">
        This column spans 16
        <div class="row">
            <div class="col span-12">
                This nested column spans 12
            </div>
            <div class="col span-12">
                This nested column spans 12
                <div class="row">
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col span-8">
        This column spans 8
    </div>
</div>

<div class="row fixed">
    <div class="col fixed-256">
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
    </div>
    <div class="col fixed-content span-24">
        This column spans the rest of the width and consists of 24 columns
        <div class="row">
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
        </div>
    </div>
</div>

<div class="row fixed">
    <div class="col fixed-256">
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
    </div>
    <div class="col fixed-content span-24">
        This column spans the rest of the width and consists of 24 columns
        <div class="row">
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
        </div>
    </div>
    <div class="col fixed-256">
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
    </div>
</div>

<div class="row">
    <div class="col offset-6 span-10">
        This column spans 10, and is offseted by 6
    </div>

    <div class="col offset-5 span-3">
        This column spans 3, and is offseted by 5
    </div>
</div>

Answer 1

You don't need flexbox for this. Here's a clever trick that can be used to achieve exactly that:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

You may have multiple floats and may even have multiple variable width element, as long as you wrap them in a container and use percentages on them.

(In case the article goes offline: The trick is to float the fixed-width element and then use display: block and overflow: hidden (or auto) on the variable width element. Setting overflow actually makes the block stay clear of the float. Many times this trick can be used instead of resorting to calc().)