How can I get a button to span the width of the card that it is contained in?

Question

I'm using Angular v6 and Angular Material to build a front page for a web project. I was wondering, how can I have the width of the button stretch to match the width of the material card component that it appears in?

Here's my code:

<div style="padding:5px">
  <mat-card>
    <button mat-button style="background-color: #008CBA; width:100%;">Portfolio</button>
    <button mat-button style="background-color: #008CBA; width:100%;">Portfolio</button>
    <button mat-button style="background-color: #008CBA; width:100%;">Portfolio</button>
  </mat-card>
</div>

Answer 1

For something like this, normally adding:

style="width: 100%; display: block;"

in the button would stretch it. If that doesn't work, go into inspect element of the button and make sure that max-width isn't set to anything lower than 100% (try display: flex as well).

Please give an example of your code for a more specific answer.