fxFlex sets min-height-and max-height at once

[NNemec]

A <div fxFlex="100px"> results in style="flex: 1 1 100px" which seems fine to me. However, it also sets style="max-height: 100px; min-height: 100px" which effectively counteracts any flex layout.

See https://plnkr.co/edit/twG9Ps for a demo. The outer height:500px should define the size. The inner fxFlex="100px" should then only define the flex-base to be stretched to the remainder of the outer 500px. This does not happen.

[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 angular/material#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