Flex Box Layouts Are Broken

[mvarshavsky]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.0

Browser versions tested against:

• Chrome 17
• Mobile Safari

Description:

• Hbox flex proportions are not respected when contents are wider than available space.

Steps to reproduce the problem:

• Run the code in test case

The result that was expected:

• Right-most item should be visible and middle item should fill remaining space

The result that occurs instead:

• Middle item assumes the width of its child, right-most item is pushed out of viewport

Test Case:

Ext.application({
  name: 'Sencha',
  launch: function() {
    Ext.create("Ext.Panel", {
      fullscreen: true,
      layout: {
        type: 'hbox',
        align: 'stretch'
      },
      items: [
        {
          width: 100,
          style: 'background:purple'
        }, {
          flex: 1,
          style: 'background:limegreen;overflow:hidden;',
          html: '<div style="width:3000px;">long div</div>'
        }, {
          width: 100,
          style: 'background:purple'
        }
      ]
    });
  }
});

[Jamie Avins]

In order for the flexed item to overflow, you will need to either set it to scrollable: true or make it's x-inner have absolute positioning. Scrolling is the typical case.