diff --git a/src/Layout.js b/src/Layout.js index 6e3e7d11..55b75d02 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -311,11 +311,12 @@ var computeLayout = (function() { // We want to execute the next two loops one per line with flex-wrap var/*int*/ startLine = 0; var/*int*/ endLine = 0; - var/*int*/ nextLine = 0; + var/*int*/ nextOffset = 0; + var/*int*/ alreadyComputedNextLayout = 0; // We aggregate the total dimensions of the container in those two variables var/*float*/ linesCrossDim = 0; var/*float*/ linesMainDim = 0; - while (endLine !== node.children.length) { + while (endLine < node.children.length) { // Layout non flexible children and count children by type // mainContentDim is accumulation of the dimensions and margin of all the @@ -359,7 +360,7 @@ var computeLayout = (function() { } // This is the main recursive call. We layout non flexible children. - if (nextLine === 0) { + if (alreadyComputedNextLayout === 0) { layoutNode(child, maxWidth); } @@ -375,11 +376,14 @@ var computeLayout = (function() { // The element we are about to add would make us go to the next line if (isFlexWrap(node) && !isUndefined(node.layout[dim[mainAxis]]) && - mainContentDim + nextContentDim > definedMainDim) { - nextLine = i + 1; + mainContentDim + nextContentDim > definedMainDim && + // If there's only one element, then it's bigger than the content + // and needs its own line + i !== startLine) { + alreadyComputedNextLayout = 1; break; } - nextLine = 0; + alreadyComputedNextLayout = 0; mainContentDim += nextContentDim; endLine = i + 1; } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index b5509580..f42ce51c 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -104,7 +104,7 @@ describe('Layout', function() { ); }); - it('should layout node with flex', function() { + it('should layout node with just flex', function() { testLayout( {style: {width: 1000, height: 1000}, children: [ {style: {width: 100, height: 200}}, @@ -1159,6 +1159,19 @@ describe('Layout', function() { ); }); + it('should layout flex wrap with a line bigger than container', function() { + testLayout( + {style: {height: 100, flexWrap: 'wrap'}, children: [ + {style: {height: 100}}, + {style: {height: 200}}, + ]}, + {width: 0, height: 100, top: 0, left: 0, children: [ + {width: 0, height: 100, top: 0, left: 0}, + {width: 0, height: 200, top: 0, left: 0} + ]} + ); + }); + xit('should layout text with alignItems: stretch', function() { testLayout( {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}},