Leaflet map not sizing to dimensions of target ele

I am having a hard time getting a leaflet map to render correctly inside a div in my application.

It's probably worth mentioning I am using angularJS, angular-material (with flex based layouts) and ui-router, so the page that the div lives on is a template for a state being loaded when the user invokes an action to navigate to that page (e.g. through a navbar item click).

My template file for the state is pretty simple:

<md-card>
    <div id='map' style="width: 500px; height: 500px;"></div>
</md-card>

In the controller file for the state, I have the following leaflet map initialisation code in place:

this.map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

When the map is rendered, the tiles do not get constrained to my div, they spill out:

My dom structure can be found below

The parent element for my md-card becomes scrollable, so when I scroll down I start seeing other tiles too:

My initial thoughts were perhaps I have been trying to render the map too soon, before the div has had time to render. I therefore tried wrapping my map initialisation code in a timeout (2 seconds) and I do see my white md-card show up first when the state is loaded, and then the tiles appear after the 2 second delay, but again they appear as per my screenshots.

The only other thing I can think of is perhaps the usage of flex is having an effect, I am however specifying explicit height and widths on the div holding my map, so I would have thought the map would adhere to that size.

Can anyone offer any suggestions\help as to what could be going on here?

Thanks

Usual symptom of missing Leaflet CSS file