Resizing FlexBox containers

Question

I'm trying to use the flexbox model to create a multi-column layout that always extends to the bounds of the screen. This works exactly as I would like it to. However, i'd also like to be able to resize one or more columns horizontally. I've tried using jQuery UI to allow the resizing, but unsurprisingly, this doesn't quite work right

As the demo below shows, when you start to resize a column, it 'jumps' by about 100 pixels.

jsFiddle example

Can anyone offer a solution to this, or another way of dynamically resizing flexbox containers? All the code is pasted below too.

HTML:

<div id="container">
    <div id="box1" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 1
            </div>
        </div>
        <div class="widget">
            <div class="widget-content">
                Item 2
            </div>
        </div>
    </div>
    <div id="box2" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 3
            </div>
        </div>
    </div>
    <div id="box3" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 4
            </div>
        </div>
        <div class="widget">
            <div class="widget-content">
                Item 5
            </div>
        </div>
    </div>
</div>

CSS:

html, body {
    height:                 100%;
    margin:                 0;
}
body {
    position:               absolute;
    height:                 auto;
    top:                    0;
    left:                   0;
    bottom:                 0;
    right:                  0;
    padding:                0;
    margin:                 5px 5px 5px 5px;
}
#container {
    height:                 100%;
    width:                  100%;
    background-color:       #FFFFFF;
    border-radius:          5px 5px 0 0;
    display:                -webkit-box;
    display:                -moz-box;
    display:                box;
    -webkit-box-orient:     horizontal;
    -moz-box-orient:        horizontal;
    box-orient:             horizontal;
    -webkit-box-pack:       justify;
    -moz-box-pack:          justify;
    box-pack:               justify;
    -webkit-box-align:      stretch;
    -moz-box-align:         stretch;
    box-align:              stretch;
}
#box1, #box2, #box3 {
    margin:                 5px;
    padding:                2px;
    display:                -webkit-box;
    display:                -moz-box;
    display:                box;
    -webkit-box-orient:     vertical;
    -moz-box-orient:        vertical;
    box-orient:             vertical;
    -webkit-box-pack:       start;
    -moz-box-pack:          start;
    box-pack:               start;
    -webkit-box-flex:       1;
    -moz-box-flex:          1;
    box-flex:               1;
}
div.widget
{
    padding:                        2px;
    -moz-border-radius:             4px 4px 0 0;
    -webkit-border-radius:          4px 4px 0 0;
    margin-bottom:                  10px;
    background-color:               #999999;
}
div.widget-maximised {
    display:                -webkit-box;
    display:                -moz-box;
    display:                box;
    -webkit-box-orient:     vertical;
    -moz-box-orient:        vertical;
    box-orient:             vertical;
    -webkit-box-pack:       start;
    -moz-box-pack:          start;
    box-pack:               start;
    -webkit-box-flex:       1;
    -moz-box-flex:          1;
    box-flex:               1;
}
div.widget div.widget-content
{
    background-color:                   #FFF;
    color:                              #333;
    line-height:                        1.2em;
    overflow:                           auto;
    padding:                            5px;
    margin:                             5px;
    width:                              auto;
    -webkit-box-flex:                   1;
    -moz-box-flex:                      1;
    box-flex:                           1;
}

JS:

$("#box1, #box2, #box3").resizable({
    handle: "e",
    cancel: "cancel"
});

Answer 1

Your problem is that you're relying on properties from an outdated Flexbox spec from 2009. If you add in the modern properties, it works smoothly as you would expect.

http://jsfiddle.net/GdPRS/2/

/* line 6, ../sass/test.scss */
html, body {
  height: 100%;
  margin: 0;
}

/* line 10, ../sass/test.scss */
body {
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 5px 5px 5px 5px;
}

/* line 20, ../sass/test.scss */
#container {
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 5px 5px 0 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* line 29, ../sass/test.scss */
#box1, #box2, #box3 {
  margin: 5px;
  padding: 2px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

/* line 37, ../sass/test.scss */
div.widget {
  padding: 2px;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
  background-color: #999999;
}

/* line 44, ../sass/test.scss */
div.widget-maximised {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

/* line 51, ../sass/test.scss */
div.widget div.widget-content {
  background-color: #FFF;
  color: #333;
  line-height: 1.2em;
  overflow: auto;
  padding: 5px;
  margin: 5px;
  width: auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}