fix(tabs): support flexible content layout

[clshortfuse]

Certain browsers had issues with resizing tab content md-tabs' parent
would change size or have an unspecified size during creation (for
example in a dialog). Converting to flexbox solves this issue.

• Set md-tab-content to flexbox
• Set md-tab-content's div to fill parent
• Set md-pagination-wrapper to flexbox

Fixes #9206, #9704, #9779

[topherfangio]

I feel like this might break some existing users who expect it to be block?

Also, have you tested this across all the browsers we support to make sure it works as expected?

[clshortfuse]

@topherfangio OK on Chrome, Firefox, IE 10, IE11 and Edge.

The reason I didn't just use display:flex was so we can use our layout engine which has more predictable results. I have yet to test on on Safari which honestly might be the only browser to present issues due to its flex-shrink bug. https://bugs.webkit.org/show_bug.cgi?id=146020

[clshortfuse]

I've reworked this to not use mdLayout and instead the display:flex in CSS.

This should not break layouts since user content is wrapped by md-tab-content, which is what we are modifying here. Despite we are adding CSS to > .div, the flex rule only applies to its relation to its parent, not its children.

We are also using flex: 1 0 to avoid any possible issues due to Safari's flexbug rendering issue: https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

[topherfangio]

LGTM 👍