CSS停止下拉选项改变大小

我试图阻止这个下拉框改变大小，每当它有一个选项长于200px宽度的下拉框。选项只是通过json文件加载-问题可以在下面的图像中看到:

列表将加载一系列游戏名称，当列表加载时，如果有一个不长于下拉菜单的选项，则很好，并且是正确的宽度，如红线所示:

http://postimg.org/image/dxx0u0wup/

但是一旦它里面有一个比下拉菜单长得多的选项，它就会导致这样的结果:(红线表示窗口的结束，但它目前是透明的，所以你看到的表单只是一个以窗口为中心的div)

http://postimg.org/image/kbtf1xs1d/full/

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

下拉菜单

    <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);
                  }

              });
        }

有些人说它是重复的，但只是因为答案不适合我-这是同样的问题，但没有一个工作，所以我做了这个

#gameSelect
{
  width:200px;
  overflow:scroll;
}
#gameSelect option
{
  width:200px;
  overflow:scroll;
}