search

angular / flex-layout

Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
MIT License
5.9k stars 772 forks source link

fxFlex flex-basis max-width #1232

Closed IainAdamsLabs closed 4 years ago

IainAdamsLabs commented 4 years ago

Bug Report

What is the expected behavior?

The documentation for fxFlex says that the flex-basis field "controls the default size of an element, before it is manipulated by other Flexbox properties" - just like the standard flex-basis field in CSS.

In which case, why does it apply the max-width property. This constrains the item to not enforcing the flex-grow property.

When applying fxFlex="1 1 5em" I would envisage that the item would grow according to the free space.

Maybe I have misunderstood the fxFlex flex-basis property.

What is the current behavior?

The max-width restricts the item from expanding.

What are the steps to reproduce?

See this stackblitz.

https://stackblitz.com/edit/angular-flex-layout-seed-sxuz9b

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

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

Tested with Angular7, Angular9, Mac OS X, Chrome.

Is there anything else we should know?

CaerusKaru commented 4 years ago

This is done to overcome bugs with CSS Flexbox in all browsers, and has the same (or similar) intended effect as regular flex-basis. If you really notice a difference, you can override this behavior by creating your own StyleBuilder in place of the default.

angular-automatic-lock-bot[bot] commented 4 years ago

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.