如何创建水平滚动容器(如下图所示)并基于文本动态更改容器(GridTile)的大小？

<div class="container">
  <!-- 这里放置容器的内容 -->
</div>

.container {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
}

<div class="container">
  <div class="grid-tile">文本1</div>
  <div class="grid-tile">文本2</div>
  <div class="grid-tile">文本3</div>
  <!-- 更多GridTile元素 -->
</div>

.grid-tile {
  display: inline-block;
  width: auto;
  padding: 10px;
  /* 设置其他样式 */
}

// 监听文本输入框的变化事件
input.addEventListener('input', function(event) {
  const newText = event.target.value;
  const gridTile = document.querySelector('.grid-tile');
  gridTile.textContent = newText;
  // 这里可以根据新文本的长度或其他条件来动态调整GridTile的大小
});