Centered content column margins reduce first

Webix JS
1

I am trying to create a layout similar to http://codepen.io/emilkm/pen/pyVWWo
where the content is centered. As you resize the page down, the margins on either side of the content are reduced to 0 first, then the content is reduced to some minimum size.

I did find some suggestions in this post http://forum.webix.com/discussion/2956/autosize-widths

maxim kindly suggested that:

for centering - you can add empty views to the layout to center align the content views ( works the same as margin:auto in css )

http://webix.com/snippet/47c63d75

, however the content and empty views (margins) are reduced equally as you resize down the browser window.

2

Adding minHeight and maxHeight to the content view almost does the job http://webix.com/snippet/c11cc5fc

Adding gravity:x completes it
http://webix.com/snippet/a719778e