Flex-layout: fxflex wrongly assigning max/min width

[wobkenh]

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.

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

[CaerusKaru]

I'm unsure of how to explicitly handle this. On the one hand, we can't just change the API on everyone without impacting existing users. Which leaves a docs alteration as the most likely course of action.

If you have time, would you be willing to submit a PR for this? Otherwise, I'll try to get this folded in for the next beta cycle.

[CaerusKaru]

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.

[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?

[simeyla]

Anybody want to make me a style-builder that does this:

// makes the grow important - so doesn't apply max-width (would still apply min-width)
fxFlex="1! 1 8em"

// makes the shrink important - so doesn't apply min-width (would still apply max-width)
fxFlex="1 1! 8em"

// makes the grow and shrink important - so doesn't apply min / max width
fxFlex="1! 1! 8em"

:-)

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