Width not spanning entire parent's width after width altering function

Question

In my code you'll notice after the function's finished running the inset div's width does completely span the entire width of its parent container but stays the the initial width (I made it red to clearly show). It doesn't effect the codes current purpose as the text runs right past it's width but it'll ultimately mess with future applications. I want the inset div's width to span the entirety of the its parent container's (#fill) width, while not messing up the function. I'm hoping its a simple fix? Thanks.

var inset = document.getElementById('inset')
var fill = document.getElementById('fill')
var text = 'There was a lamb who had a cow and a farmer was involved and then you make a moo sound and yell BINGO and that is how the song goes.';
var words = text.split(" ")

var i=0
var timer = 5;
var wordTime = (timer/words.length)*1000;
    

var myVar = setInterval(myFunct, wordTime);

function myFunct() {
    if (i == words.length) {
        clearInterval(myVar);
    }
    else {
        inset.innerHTML += " " + words[i];
    }
    i++
    let outer = fill
    outer.scrollLeft += outer.scrollWidth;
    }

#wrapper {
        position:absolute;
        display:flex;
        height:100px;
        width:100%;
        min-width:100%;
        max-width:100%;
        left:0;
        right:0;
        bottom:0;
        align-items: center;
        text-align:right;
        color:whitesmoke;
        font-family: sans-serif;
        font-size: 200%;
        background-color: rgba(0,0,0,0.7);
    }
       
    #fill {
        display:flex;
        width:100%; /*You can make this 100% to have text span across entire containing div */
        height:100%;
        max-width:100%;
        align-items: center;
        overflow:auto;  
    }
    
    #inset {
        white-space: nowrap;
        padding-left:5px;
        min-width: 100%;
        background-color:red;
    }

<div id='wrapper'>
        <div id ='fill'>
            <span id='inset'></span>
        </div>
    </div>

Answer 1

You can remove some useless code like below and add margin-left:auto; to span element:

var inset = document.getElementById('inset')
var fill = document.getElementById('fill')
var text = 'There was a lamb who had a cow and a farmer was involved and then you make a moo sound and yell BINGO and that is how the song goes.';
var words = text.split(" ")

var i = 0
var timer = 5;
var wordTime = (timer / words.length) * 1000;


var myVar = setInterval(myFunct, wordTime);

function myFunct() {
  if (i == words.length) {
    clearInterval(myVar);
  } else {
    inset.innerHTML += " " + words[i];
  }
  i++
  let outer = fill
  outer.scrollLeft += outer.scrollWidth;
}

#wrapper {
  position: absolute;
  display: flex;
  height: 100px;
  /*width: 100%;*/
  min-width: 100%;
  /*max-width: 100%;*/
  left: 0;
  right: 0;
  bottom: 0;
  /*align-items: center;*/
  /*text-align: right;*/
  color: whitesmoke;
  font-family: sans-serif;
  font-size: 200%;
  background-color: rgba(0, 0, 0, 0.7);
}

#fill {
  display: flex;
  /*width:100%*/
  min-width:100%;
  height: 100%;
  align-items: center;
  overflow: auto;
}

#inset {
  white-space: nowrap;
  /*min-width: 100%;*/
  padding-left: 5px;
  background-color: red;
  margin-left:auto; /* Added */
}

<div id='wrapper'>
  <div id='fill'>
    <span id='inset'></span>
  </div>
</div>