fxflex wrongly assigning max/min width

Bug, feature request, or proposal:

There seems to be a bug with fxflex where max/min width is set even though grow/shrink is specified.

What is the expected behavior?

Using fxflex value of 1 1 700px, no max width / min width should be applied. The docs say:

flex-shrink: defines how much a flexbox item should shrink if there is not enough space available.

as well as

flex-grow: defines how much a flexbox item should grow (proportional to the others) if there’s space available. The flex-grow value overrides the width.

Note that is explicitly states that flex-grow will override the width.

So if flex-shrink and flex-grow are specified, the element should be able to shrink if there is not enough space left and grow if there is leftover space.

What is the current behavior?

Max/Min width will be applied to elements even if they have shrink/grow enabled. This seems to be the contrary of what will happen if you use standard css flexbox with the same values (there, the elements will grow/shrink correctly).

Funnily enough, the max width will not be applied if you wrap the pixel values into calc (e.g. 1 1 calc(700px)). The min width, however, will still be applied.

Simple example (see stackblitz link below):

<div fxFlex="1 1 150px" class="sec2" >
    second-section
</div>
<div fxFlex="2 1 300px" class="sec3">
    third-section
</div>

What are the steps to reproduce?

See this stackblitz for the above example

Here a stackblitz showing that max width will not be applied if pixel values are wrapped in calc

What is the use-case or motivation for changing an existing behavior?

Either im bad at reading docs or this is broken / the docs are wrong.

I originally wanted to have two divs in a row, where one has a maximum width of 300px and the other takes up the remaining space, but when div two shrinks below 700px, both divs start to shrink. Since this did not work, i now switched to simply using a basis of 0 and chosing the appropriate grow/shrink for both divs.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Happens in stackblitz (Angular 5) as well as in my private project (Angular 6), so: Angular Version: 6.0.1 / 5.2.9 Material Version: 6.0.1 / 5.2.4 flex-layout Version: 6.0.0-beta.15 / 5.0.0-beta.13 OS: Windows 10 64 bit Typescript: 2.7.2 / whatever stackblitz example uses Browser: Chrome 66 64 bit

Is there anything else we should know?

If I just overread something in the docs or this is a known issue or intended behaviour, i’m sorry. I also hope this is not a duplicate. I looked through open issues and googled a bit and could not find something. I only found this SO thread and there it is also said that the docs seem to be wrong.

[tmtron]

Now that we’ve introduced StyleBuilders, you can change the algorithm if you want! So I’m closing this issue with the suggestion of building your own algorithm and using that instead.

@CaerusKaru : Is there an example for a custom style builder that works as expected by this bugreport?

[adamdport]

I agree with you, the max/min width thing doesn’t make sense to me. You can read some discussion of it in #438 and #689.