how do you make text in a grid adjust when the size of the grid is adjusted

Question

I have a grid and am wanting it so that the text in one of the cells adjusts to the size when the grid is resized. At the moment my solution is to use overflow hidden.

I have tried to use flex for that one cell but I can not get it to work.

.navgrid {
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  height: 100px;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: #cacbc7;
  padding: 1px;
  border-radius: 0px;
  font-size: 16px;
}

#item-1 {
  background-color: #8BE5FE;
  grid-row-start: 1;
  grid-column-start: 3;
  max-width: 100%;
  overflow: hidden;
  max-width: 100%;
  grid-row-end: 3;
  grid-column-end: 5;
}

#item-1 .background {
  text-transform: uppercase;
  font-family: GT Pressura Mono, Roboto Mono, monospace;
}

#item-1 .background .p {}

<div class="navgrid">
  <div id="item-1"><span class="background"><p><br>..................WholeSale<br>..................Steep</p></span></div>
</div>