MdInput renders suffix's width relative to input width; often too wide

[mark-langer]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

A suffix that is added to an <md-input> element should only be as wide as the suffix's contents.

What is the current behavior?

The suffix's width is calculated relatively to the width of the entire input. If the input is, let's say, 650px wide, then the suffix renders to approximately 80px, although the suffix's content only has a width of, say, 24px.

What are the steps to reproduce?

Simply set the width of the <md-input> to a large number to see the relative sizing of the suffix.

Plunker: http://plnkr.co/edit/DnK191LGat2o3bnOyTtt?p=preview

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

The suffix is supposed to go to the very end of the input field. The current behaviour leaves too much white space to the right of the suffix.

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

Tested with Angular 2.0.0, Material 2.0.0-alpha.9 on Firefox 49.0.1, Windows 10

Is there anything else we should know?

A good solution might be styling the div.md-input-table and its children as a flexbox in the MdInputComponent template.

[mmrath]

@jelbourn ,@mark-langer would you know of any workaround Style for fixing this?

[mark-langer]

#1881

[angular-automatic-lock-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.}