diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts index 0311093af..90c2abc4d 100644 --- a/src/lib/flexbox/api/flex.spec.ts +++ b/src/lib/flexbox/api/flex.spec.ts @@ -151,11 +151,52 @@ describe('flex directive', () => { it('should set a min-width when the shrink == 0', () => { expectDOMFrom(`
`).toHaveCssStyle({ 'flex': '1 0 37px', - 'max-width': '37px', 'min-width': '37px', 'box-sizing': 'border-box', }); }); + it('should set a min-width and max-width when the grow == 0 and shrink == 0', () => { + expectDOMFrom(`
`).toHaveCssStyle({ + 'flex': '0 0 375px', + 'max-width': '375px', + 'min-width': '375px', + 'box-sizing': 'border-box', + }); + }); + + + it('should not set max-width to 69px when fxFlex="1 0 69px"', () => { + expectDOMFrom(`
`).not.toHaveCssStyle({ + 'max-width': '69px', + }); + }); + + it('should not set a max-width when the shrink == 0', () => { + let fRef = componentWithTemplate(`
`); + fRef.detectChanges(); + + let dom = fRef.debugElement.children[0].nativeElement; + let maxWidthStyle = getDOM().getStyle(dom, 'max-width'); + + expect(maxWidthStyle).toBeFalsy(); + }); + + it('should not set min-width to 96px when fxFlex="0 1 96px"', () => { + expectDOMFrom(`
`).not.toHaveCssStyle({ + 'min-width': '96px', + }); + }); + + it('should not set a min-width when the grow == 0', () => { + let fRef = componentWithTemplate(`
`); + fRef.detectChanges(); + + let dom = fRef.debugElement.children[0].nativeElement; + let minWidthStyle = getDOM().getStyle(dom, 'min-width'); + + expect(minWidthStyle).toBeFalsy(); + }); + it('should set a min-width when basis is a Px value', () => { expectDOMFrom(`
`).toHaveCssStyle({ 'flex': '1 1 312px', diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts index 20d6547b6..5fb49b118 100644 --- a/src/lib/flexbox/api/flex.ts +++ b/src/lib/flexbox/api/flex.ts @@ -226,6 +226,14 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, 'column' : 'row'; + if ( grow == "0" ) { + grow = 0; + } + + if ( shrink == "0" ) { + shrink = 0; + } + // flex-basis allows you to specify the initial/starting main-axis size of the element, // before anything else is computed. It can either be a percentage or an absolute value. // It is, however, not the breaking point for flex-grow/shrink properties @@ -250,6 +258,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, break; case 'initial': // default case 'nogrow': + grow = 0; css = extendObject(clearStyles, {'flex': '0 1 auto'}); break; case 'grow': @@ -263,6 +272,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, css = extendObject(clearStyles, {'flex': `${grow} ${shrink} auto`}); break; case 'none': + grow = 0; shrink = 0; css = extendObject(clearStyles, {'flex': '0 0 auto'}); break; @@ -300,8 +310,13 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, let usingCalc = String(basis).indexOf('calc') > -1; let isPx = String(basis).indexOf('px') > -1 || usingCalc; - css[min] = (basis == '0%') ? 0 : isPx ? basis : null; - css[max] = (basis == '0%') ? 0 : usingCalc ? null : basis; + + // make box inflexible when shrink and grow are both zero + // should not set a min when the grow is zero + // should not set a max when the shrink is zero + let isFixed = !grow && !shrink; + css[min] = (basis == '0%') ? 0 : isFixed || (isPx && grow) ? basis : null; + css[max] = (basis == '0%') ? 0 : isFixed || (!usingCalc && shrink) ? basis : null; return extendObject(css, {'box-sizing': 'border-box'}); }