I’m posting this so I can solve it because it was a big problem for me until just now. Angular reactive forms with <mat-form-field> will clip half the label inside a flex-box without doing anything to it.
This is all out-of-box behavior anytime I setup an angular app, so I’m assuming other people run into it too.
I’m not sure what it is in later versions, but as of the current angular (v18.1.2) you just have to specify the actual <label> element’s CSS top property to be 50%. You’ll need to reference all labels within your app using the main styles.scss file to actually get this to show up on the screen. The SCSS selector I used was .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex label.mat-mdc-floating-label and I found that through inspecting elements.
There’s no good reason why it does this, but a quick-fix is better than no fix at all, so I’m posting it here.