反応に問題があります。水平スクロールで表示できる多くの子 div を含む、単純なスクロール可能な div を実装しようとしています。

基本的に、各子 div は 1 日に対応します。このコンポーネントは、ユーザーが当日と翌日に関する情報を初めて表示するときにロードされます。ただし、ユーザーが（左または右に）スクロールした場合、ある種の「無限スクロール機能」を実装して、より多くの情報を追加できるようにしたいと考えています。

親 div の最後に新しい子 div を追加しようとしても、問題はありません。ただし、親 div の先頭に新しい子要素を追加しようとすると (たとえば、ユーザーが前日のコンテンツを見たい場合)、新しい要素を追加した後にスクロールが変化し、ユーザーはなぜスクロールが変化しています。

セットアップを複製するために小さな JS フィドルを作成しました。 「左に追加」をクリックしてみると、現在の動作が表示されます。 ビュー全体を変更せずに新しい要素を追加する方法はありますか? https://jsfiddle.net/k75pvey3/3/

P.s. この質問に対する多くの回答をオンラインで見ました。ただし、私が見たこれらはすべて、新しいコンポーネントが特定の幅を持つことを前提としています。私の場合（フィドルで表示しようとしているのですが）、新しく追加された子 div の幅を決定できません。

参考コードは次のとおりです:

関数アプリ(小道具) {

  const [配列, setArray] = React.useState(['100', '321', '32', '412', '12', '33', '54'])

  const addLeft = () => {
    setArray([Math.floor(Math.random()*300), ...array])
  }
  
  const addRight = () => {
    setArray([...array, Math.floor(Math.random()*300)])
  }

  戻る （
    <div className='アプリ'>
      <ボタン onClick={addLeft}>左を追加</button>
      <ボタン onClick={addRight}>右を追加</button>
      <div className="コンテナ">
        {array.map(i => (<div className="element" style={{minWidth:i}}>{i}</div>))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

これは CSS です: