Javascript CSS停止下拉选项更改大小？

我试图阻止这个下拉框改变大小，只要它有一个选项，它比设置的200px宽度的下拉框长。这些选项只是由一个json文件加载的-问题可以在下面的图片中看到：

列表加载游戏名称选择，当列表加载时，如果有一个选项长度不超过下拉菜单，则该列表正常，且宽度正确，如红线所示：

但一旦它有一个比下拉列表更长的选项，它就会产生以下结果： （红线表示窗口的结尾，但它当前是透明的，因此您看到的窗体只是一个以窗口为中心的div）

你可以看到我使用的css，首先我尝试设置不同的宽度，但没有改变任何东西，然后我认为这可能与溢出有关，但也不起作用

用于下拉列表的HTML

    <label for="state">Games: </label>
    <select id="gamesSelect" name="gamesSelect">
    </select>

游戏：

然后是填充它的JS

function loadGames() {

              console.log("Getting games list");

              $.getJSON("games.json", function (games) {

                  console.log(games);

                  var gamesSelect = document.getElementById("gamesSelect");
                  for (var i = 0; i < games.array.length; i++) {
                      var opt = games.array[i];
                      var el = document.createElement("option");
                      el.textContent = opt;
                      el.value = opt;
                      el.width = "200";
                      gamesSelect.appendChild(el);
                  }


              });

        }

函数loadGames（）{
日志（“获取游戏列表”）；
$.getJSON（“games.json”），函数（games）{
控制台日志（游戏）；
var gamesSelect=document.getElementById（“gamesSelect”）；
对于（var i=0；i

---

有些人说这是重复的，但这只是因为答案对我不起作用-这是同样的问题，但没有起作用，所以我做了这个

更改代码如下：

#游戏选择
{
宽度：200px；
溢出：滚动；
}
#游戏选择选项
{
宽度：200px；
溢出：滚动；
}

您可以发布下拉列表的代码或使用它链接到站点吗？使用代码更新它您是否尝试过

选择选项{width:}

？影响此下拉列表的CSS如何？右键单击下拉列表中的inspect元素时，您会看到什么CSS？请尝试不要设置

宽度

或放置

宽度：自动

谢谢，但不起作用：/只是使所有内容溢出：