Flex-layout: fxFlex sets min-height-and max-height at once

[somombo]

@NNemec I have also run into what looks like the same issue. After digging into the source code I stumbled on a comment that says See line 296

The comment has a link to the "flexbugs" repo that keeps track of known issues regarding flexbox's implementation in different browsers. The link is specifically referring to item number 11, which says there's a problem with the way safari calculates flex things that necessitated this as a work around..

In summary it looks like the flex developer tried to implement that workaround, and the workaround is "doing to much" i.e. it would be ideal if somehow the workaround was only being applied if the browser is safari..

In my case, setting min/max height is messing things up enough that i'm unfortunately considering just using barebones flex css instead of this flex-layout lib.

[ThomasBurleson]

Interesting idea... the team will need to investigate the impacts of browser detection and conditional applications of maxHeight/minHeight.

[somombo]

Here is another idea:

If when bootstraping and importing the flex module one was able to do something like:

  imports         : [...
    FlexLayoutModule.forRoot( { useFlexbugsWorkarounds: false } )
  ...]

... where the usual FlexLayoutModule.forRoot() defaults useFlexbugsWorkarounds to true.

Then the end-developer could have the flexibility to decide to use the workarounds as published on flexbugs or else, use some other workarounds e.g. flexiblity or by writing their own custom workarounds that match their app's target audience/browsers

[ThomasBurleson]

@NNemec - I am confused. If you set fxFlex="100px" you are effectively stating that the div should have a 100px height. If you want it to fill the availalble vert space, you should use fxFlex.

[NNemec]

Lacking any documentation that states the intended behavior, I can only infer: fxFlex"100px" results in style="flex: 1 1 100px", which indicates a flex-basis of 100px, i.e. a starting size from where the real size should grow or shrink to fill the available space. This is in contradiction to the min&max values that restrict the flex box from changing at all. This effect could better be achieved by style="flex: 0 0 100px".

[ThomasBurleson]

@NNemec - Our documentation is truly inadequate. Our small team has that effort as a task item... but the code stabilization has had priority. If you have time to help with our docs, we would love a Pull Request.

Our current plans are to publish a GitBook for the API... until the full integrated suite of documentations are ready.

[somombo]

I am confused. If you set fxFlex="100px" you are effectively stating that the div should have a 100px height. If you want it to fill the availalble vert space, you should use fxFlex.

@ThomasBurleson I actually agree with @NNemec, if you set fxFlex="100px” we expect that this will have the same effect as flexbox-2016 css i.e. it should simply result in css { flex: 100px; } ( perhaps, with some extra 'webkit' equivalents included for backward compat) .

And as you can see in plunk, css { flex: 100px; } is is equivalent to css { flex: 1 1 100px; } https://plnkr.co/edit/MuTRjhIJ0EQoZxiwlxOC

So, Setting min-height / min-width is something the end user can do themselves if it's necessary for the specific application. As I pointed out earlier, I believe that the safari compatibility hack is what is the root of the problem.

This issue should probably still be open till it's been addressed somehow.

[somombo]

Apparently there was some discussion about the original need to incorporate the fix for the safari flexbug
I found over here https://github.com/angular/material/issues/5345, i'll leave this here just so everyone can see

[fredrik-lundin]

This is really giving me some issues right now.

I'm having a scenario where i basically have three elements in a row. Two of them (A, B) are suppose to go on each side of the third (C). A and B have fxFlex: 1 1 0px while C has fxFlex 3 1 0px.

What I want to achieve is to have the three elements in an row where C is three times as wide as A and B.

This works great if I use regular flexbox CSS, but is not working with flex-layout since the max-width property is being set to max-width: 0px.

Is this intended behavior?

@ThomasBurleson

[cam-m]

This still appears to be an issue as at v6.0.0-beta. It's unclear from the discussion above (at least to me) why this was closed.

Incidentally, setting fxFlex="1 1 100px" (as well as just fxFlex="100px") results in the inline styles "min-height=100px; max-height=100px;" on the container. The desired flex grow/shrink behaviour are overridden.

My workaround is max-height: none !important; on the flex child.

I agree with @somombo ...

This issue should probably still be open till it's been addressed somehow.

Can this be reopened?

[SvenBudak]

Is it normal that fxFlex="320px" sets a height of 320px? i mean in responsive design is it a no go to set fix height values... And i cant remember that the flaxLayout module for Angular1 sets anytime any height... This one thing makes FlexLayout a bit useless for me. i hope i just didnt get the correct usage of this.

[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._}