bug(MatFormField): textarea can be reduce to a smaller height than it's content

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

A `textarea` within a `mat-form-field` can be resized using the mouse. If its height is reduced to less than the height of a single line of text, a vertical scrollbar will appear, and the text within the `textarea` will become truncated. This occurs while the parent `mat-form-field` maintains a minimum height of 56px.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-wybpxw?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:
1. using the mouse, reduce the `textarea` height below 24pixels => a vertical scrollbar appears

This bug can also be reproduced on Material's documentation: https://material.angular.io/components/form-field/overview#form-field-overview

### Expected Behavior

It should not be possible to reduce a `textarea` height below 24px, which represents a single line of text.

### Actual Behavior

When a `textarea` height is reduced below 24px, a vertical scrollbar appears even though the parent `mat-form-field` keeps a minimal height of 56px.

I also noticed that when the `textarea` height is reduced from 28px to 27px, the text within the `textarea` is moved up by 1px. The same behavior can be observed down to 24px. I couldn't understand why this occurs and I'm not sure it is related to the height problem described above.

### Environment

- Angular: 18.2.8
- CDK/Material: 18.2.8 (but could be reproduced on all versions of the Material documentation)
- Browser(s): Edge 131.0.2903.51 / Chrome 130.0.6723.116
- Operating System (e.g. Windows, macOS, Ubuntu): Windows / Ubuntu

src/index.html と src/main.ts にあるリンク先の StackBlitz reproduction から始め、次に Material のドキュメントにある form-field の例と動作を比較します。textarea を 24px 未満にリサイズできず、そのテキストが切り詰められたり予期せず移動したりしなければ、修正は完了です。

索引モデルが issue の本文から書いたものです。