Q:

mat-form-field always show under other elements in Angular Material

im struggling very much with the implementation of materials mat-form-field inside a mat-card. I've created a complete new solution to demonstrate my problem. For example, i'm trying to add two mat-cards. One above the other. The first card has a mat-form-field inside and the other a image for example. That works fine. But when i click on the mat-form-field, the selection options are shown at the bottom of the page in full size. Here is the simplest implementation. tested on firefox and chrome.
<div fxFlex=25%>
<mat-card>
  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option </mat-option>
    </mat-select>
  </mat-form-field>
</mat-card>
<mat-card>
  <img mat-card-image src="http://images.all-free-download.com/images/graphiclarge/harry_potter_icon_6825007.jpg">
</mat-card>
</div>

I've tried different things like:
css styling, fxLayout="column", fxFill, put the i div containers and so on. And yes my BrowserAnimationsModule is loaded. They are also no errors.

A:

Alright, i've found the solution! You have to add a prebuild-theme into your styles.css file!
I've added this code to my global styles.css
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

