How do I turn off flex layout for a hidden Angular Material class

Question

In an angular cli dev environment I have created a grid list component with a single tile, in a file called layout-grid.component.html:

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <app-splash></app-splash>
  </md-grid-tile>
</md-grid-list>

The grid tile has a component embedded in it called app-splash, which contains a single image:

<img src="../assets/horse.jpg" alt="Horse">

When I run the web app, I see the image in the middle of the tile, but with a gap around the edge. I want the img to fill the tile. Using the inspector with Chrome, I have found that the culprits are the hidden classes:

.mat-grid-tile .mat-figure {
  align-items:center;
  bottom:0;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;
}

and if I turn off the display: flex property I get the result I need. How do I turn it off in my code? Setting the css for the grid list component to inline does nothing. Do I need to change the typescript? layout-grid.component.ts is as follows:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout-grid',
  templateUrl: './layout-grid.component.html',
  styleUrls: ['./layout-grid.component.css']
})
export class LayoutGridComponent implements OnInit {

  tiles = [
    {text: 'One', cols: 4, rows: 10, color: 'lightblue'},
  ];

  constructor() { }

  ngOnInit() {
  }

Answer 1

In /layout-grid.componet.css add this:

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
  display: block !important; /* or whichever you need */
}

This will override the one in angular material css.