Ridimensionamento dei contenitori FlexBox

Question

Sto provando a utilizzare il modello di flexbox per creare un layout a più colonne che si estende sempre ai limiti dello schermo. Funziona esattamente come mi piacerebbe. Tuttavia, mi piacerebbe anche essere in grado di ridimensionare una o più colonne orizzontalmente. Ho provato a utilizzare l'interfaccia utente jQuery per consentire il ridimensionamento, ma non sorprende, ma non funziona correttamente.

Come mostra la demo qui sotto, quando inizi a ridimensionare una colonna, essa "salta" di circa 100 pixel.

jsFiddle example

chiunque può offrire una soluzione a questo, o di un altro modo di ridimensionare in modo dinamico contenitori Flexbox? Tutto il codice è incollato anche qui sotto.

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

Il tuo problema è che si sta contando sulle proprietà da una spec Flexbox obsoleto dal 2009. Se aggiungi le proprietà moderne, funziona senza problemi come ti aspetteresti.

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; 
}