宽度改变功能后宽度不跨越整个父项的宽度

Question

在我的代码中，在函数完成后，您会注意到插图div的宽度确实跨越了父容器的整个宽度，但保持了初始宽度(我使其红色为红色展示(。它不会影响当前的目的，因为文本已超过其宽度，但最终会弄乱未来的应用程序。我希望插图div的宽度跨越其父容器(#fill(宽度的整个宽度，同时又不会弄乱该功能。我希望这是一个简单的修复？谢谢。

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

您可以删除一些无用的代码，例如下面的 margin-left:auto; span元素：

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>

Answer 2

尝试将white-space: nowrap;给父母，而不是#inset

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;
  white-space: nowrap;
  direction:rtl;
}
#inset {
  padding-left: 5px;
  background-color: red;
}

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

Answer 3

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: fixed;
  /* Changed */
  overflow: scroll;
  /* Added */
  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 {
  position: absolute;
  /* Added */
  white-space: nowrap;
  padding-left: 5px;
  min-width: 100%;
  background-color: red;
}

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

如果定位不是问题，则可以尝试以上解决方案。