Geek Answers Handbook

Resize FlexBox Containers

I am trying to use the flexbox model to create a multi-column layout that always extends to the borders of the screen. It works exactly as I would like. However, I would also like to be able to resize one or more columns horizontally. I tried using jQuery UI to allow resizing, but no wonder this is not entirely correct.

As shown in the demo below, when you start resizing a column, it “jumps” about 100 pixels.

JsFiddle example

Can someone suggest a solution for this or another way to dynamically resize flexbox containers? All code is also inserted below.

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" });
+6
source share
1 answer

Your problem is that you have been relying on features of the obsolete Flexbox specification since 2009. If you add in modern properties, it will work 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; }
+3
source

More articles:


All Articles