How can I make my background-color fill all my content with hozintal scrolling for both odd and even cells?

Question

This question has been asked quite a few times however at least the 5 to 10 questions which I have seen don't seem to work for me.

Here is my code. If you can run it and see, the horizontal scroll's colour does not expand entirely.

I have tried a variety of things mentioned in various answers however none seem to work for me.

My requirement:

I have a list of data with alternate colours - grey and white. I need all grey cells to expand to the max size of white and grey cells. It would be great if someone could point to me what I am missing here.

.teammates{
position: absolute;
/*left: 2.83%;
top: 42%;*/
height: 160px;
width: 560px;
background: #FFFFFF;
border: 1px solid rgba(189, 189, 189, 0.79);
box-sizing: border-box;
border-radius: 2px;
}

ul.text-list{
    white-space:nowrap;
    position: absolute;
    list-style:none;
    max-height:160px;
    max-width: 100%;
    margin:0;
    overflow:auto;
    padding:0;
    text-indent:15px;
}
li.text{
  line-height:30px;
  font-family: Inter-Regular;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  color: #000000;
}
li.text:nth-child(odd){
    /*display:inline;*/
  background: rgba(222, 222, 222, 0.61);
}

<div class="teammates">
      <ul class="text-list">
        <li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text</li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text  this is a text this is a text</li>
  </ul>
</div>

Things tried:

1. https://stackoverflow.com/a/20776650/5841297
2. https://stackoverflow.com/a/20776585/5841297
3. Also, tried display:table-row which found I from an answer

Answer 1

1. Remove max-width and overflow property from text-list class.
2. Add overflow: auto to teammates class.

.teammates{
    position: absolute;
    height: 160px;
    width: 560px;
    background: #FFFFFF;
    border: 1px solid rgba(189, 189, 189, 0.79);
    box-sizing: border-box;
    border-radius: 2px;
    overflow: auto;
}

ul.text-list{
    white-space:nowrap;
    position: absolute;
    list-style:none;
    max-height:160px;
    /*max-width: 100%;*/
    margin:0;
    /*overflow:auto;*/
    padding:0;
    text-indent:15px;
}
li.text{
    line-height:30px;
    font-family: Inter-Regular;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
}
li.text:nth-child(odd){
    /*display:inline;*/
    background: rgba(222, 222, 222, 0.61);
}

<div class="teammates">
      <ul class="text-list">
        <li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text</li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text </li>
        <li class="text">this is a text this is a text this is a text this is a text this is a text this is a text this is a text this is a text  this is a text this is a text</li>
  </ul>
</div>