Flex-layout: Safari inconsistencies/bugs

[intellix]

OS: OSX Sierra 10.2.2
Safari: 10.0 and 10.1

plnkr: https://plnkr.co/edit/jSSPbOI8GluXsVMWcrWa?p=preview
codepen: http://codepen.io/intellix/pen/egNEJN

Having massive issues with inconsistencies between Safari and any other browser. Safari doesn't seem able to work out the height of a parent flex element when using height: 100% unless it's the direct child of an fxFlex.
Angular is all about components using custom tags which are inline by default so this is causing massive issues. At the moment it seems that because I can't apply fxDirectives as HostBinding on a component, the workaround is to pass down the height through components like:

:host {
  display: flex;
  flex: 1;
}

Apologies if you think this is a lack of understanding from me but was told to create an issue in angular/angular in case that the browser bug can be worked around via patch in this library.

Safari:

Chrome:

[ThomasBurleson]

You host test-chat does not have any height css. Column modes require parent components to indicate height (to render properly in Flexbox).

Try this:

selector: 'test-chat',
  styles: [`
    :host {
      display: block;
      height: 100%;
    }
  `]
}

[intellix]

height: 100% doesn't work in Safari :) It's not able to calculate the height even using it's parent.
calc(100vh - navHeight) would work but means the component isn't re-usable.

With all of the custom components wrapping Safari has a real problem calculating height.

Safari just does not yet support Flexbox without manually forcing heights everywhere. Not even flex-wrap works until 10.1

[leocaseiro]

@intellix, it works if your parent elements also come with height or 100%: http://stackoverflow.com/a/33644245/3415716

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