fix(material/input): uncessary scroll bar on auto-resize textarea in …

…some cases (#21619)

It's common for apps to set `box-sizing: border-box` on all elements in the app which ends
up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly
set `box-sizing: content-box` to fix it.

Note that ideally we'd do this at the `cdk/text-field` level since it is the one responsible
for resizing the textarea, but we generally try to avoid changing the user's layout through
the CDK.

Fixes #21560.

(cherry picked from commit 915791b)

src/material/form-field/form-field-input.scss

@@ -32,6 +32,11 @@
   // placeholder, the alignment should be inherited here.
   text-align: inherit;
 
+  // It's common for developers to set `box-sizing: border-box` on every element on the page.
+  // Reset it to `content-box` since all of our styles are written with it in mind. `border-box`
+  // can also cause unnecessary scrollbars on auto-resizing textareas (see #21560).
+  box-sizing: content-box;
+
   // Undo the red box-shadow glow added by Firefox on invalid inputs.
   // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
   &:-moz-ui-invalid {