Flex-layout: Setting flex-basis to 0 results in max-width: 0

[adamdport]

I'm trying to set up rows with equal-width columns. I can tell flexbox to not consider the contents in its calculations by setting a flex-basis of 0. This lets flex-grow distribute all available space in consistent proportions.

I tried the following:

<div fxLayout="row">
    <div fxFlex="1 1 0px">Grows to 25% width</div>
    <div fxFlex="3 1 0px">Grows to 75% width</div>
</div>

What resulted was both child divs having max-width: 0px set, which ruined my layout. If I remove this max-width property, the row renders correctly. Here's a plunker demonstrating the issue.

[somombo]

@adamdport I see what you mean.

This is related to https://github.com/angular/flex-layout/issues/153,

In order to minimize regressions, the PR for issue #153 only handled the degenerate cases where either grow=0 or shrink=0. However I did have a hunch that there may be a more general usecase where this may become an issue again (as is the case in this issue).

Setting Max/Min seems to have been added as a workaround for for Safari Flexbug#11. I have just tested for that bug and it no longer appears to be an issue in current Safari. In addition, the official webkit bug posting confirms that this was closed several months ago.. I have filed https://github.com/philipwalton/flexbugs/issues/218 So the flexbugs repo can confirm that it is indeed no longer an issue.

If this is indeed the case, then it will probably be safe to remove all the min/max workarounds,
@ThomasBurleson what do you think?

[somombo]

@ThomasBurleson also Flexbug#11 only applies for containers that wrap. I am not sure why max/min workaround is set for containers that dont have flex-wrap (such as the ones exemplified in this issue).. Was there perhaps another reason why Max/Min was added?

[adamdport]

Another issue is with parsing. CSS doesn't require units if the value is 0. fxFlex="1 1 0px" sets flex-basis to 0px, but fxFlex="1 1 0" sets it to 100% for some reason. flex: 1 1 0; is valid CSS.

Should this be a new issue or can it be fixed as part of this one?

[somombo]

@adamdport That looks like it was intensionally implemented that way.. See flexbug#4. Let us know if there is otherwise still an issue when you use explicit units.

[adamdport]

If someone sets fxFlex="1 1 0" (without units), shouldn't this API set flex to 1 1 0px (with units) to satisfy flexbug#4? Setting it to 1 1 100% seems like the opposite of what the developer intended.

[somombo]

@adamdport I had similar thoughts.. there may be another reason along the lines of flexbug#7, however go ahead and open an issue for it. This may be a feature request seeing as, for now, there is a relatively painless workaround

[gajdot]

Any update on this? Why the hell am I forced to set max width? Basically I can't use fxFlex="1 1 0" like this, because a max width of 0 is set....

[adamdport]

@gajdot consider just using <div fxFlex> instead of <div fxFlex="1 1 0">. You can read all about it here. This will effectively set flex: 1 1 0.000000001px, and you can override fxGrow and fxShrink as you need to. While it's not as readable, it helped me work around this issue.

[gajdot]

The total wiki containing both fxGrow and fxShrink is a mere wiki comment:

Another usage (with distinct grow and shrink values) such as <div fxFlex fxShrink="0" fxGrow="2"></div>would result in an inline styling of flex : 2 0 0.000000001px.

That's not to good... At least now I know about them... Thanks for the work around, but still I believe this auto setting of max width should be avoided...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}