Why is div hover constrained to mat-grid-tile?

Question

I have a div that shows content when the user hovers over the mat-grid-tile.

I want it to be big enough to show all of its contents, however this is not happening because it seems to be constrained inside the mat-grid-tile.

What it looks like before hover:

What it looks like when hovering:

What I want it to look like:

HTML:

<mat-grid-tile *ngFor="let quickPhrase of phrases.QuickPhraseList ; let i = index" [attr.data-index]="i"
                                   [ngClass]="{'selected':phraseSelected === quickPhrase.Phrase}"  >
                        <div class="phrase-box">
                            <p>{{quickPhrase.PhraseTitle != null ? quickPhrase.PhraseTitle.substring(0,25) : "Add Title"}}</p>
                            <span>
                                <p class="hover-phrase-title"><strong>Title:</strong><br>{{quickPhrase.PhraseTitle}}</p>
                                <p class="hover-phrase-content"><strong>Quick Phrase:</strong><br>{{quickPhrase.Phrase}}</p>
                            </span>
                        </div>
                        <mat-icon *ngIf="false" mat-list-icon dndHandle>
                            drag_handle
                        </mat-icon>
                    </mat-grid-tile>

CSS:

  .phrase-box {
    width: 100%;
    position: relative;
    margin: 0px;
    cursor: pointer;
    
  }
  
  span { display: none; }
  
  .phrase-box:hover > span {
    width: 84%;
    display: inline-block;
    position: absolute;
    top: -100px;
    left: 15%;
    border: 2px solid rgb(187, 186, 186);
    background-color: #fff;
    padding-left: 10px;
    z-index: 999;
  }

  .hover-phrase-title {
      margin-top: 10px;
  }
  .hover-phrase-content {
      margin-bottom: 10px;
  }

Answer 1

I figured out what was causing this. There was an inherited CSS style. Overflow had the value hidden inherited. I changed css for .mat-grid-tile to be:

overflow:visible;

And now it works properly.