JavaScript / SASS：如何根据输入字段的宽度覆盖Google Maps API v3自动完成下拉列表的默认宽度？

Question

我遇到一个问题，即自动完成下拉列表（带有类＆＃34; pac-container＆＃34;的div）总是与输入字段右侧对齐的4个像素。如下所示：

这是HTML：

<input id="autocomplete" size="50" placeholder="Enter your address" type="text"></input>

和JavaScript：

function initialize() {
  var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
  new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
}

initialize();

这是JSFiddle代码段：http://jsfiddle.net/GVdK6/524/

Google Maps API会自动计算此宽度，并通过内联样式将其应用于下拉列表。我希望它具有相同的宽度并与输入字段对齐。输入字段的宽度可以根据size属性而变化，因此使用！important规则将pac容器的宽度设置为CSS中的固定值不起作用。任何帮助将不胜感激，谢谢！

Answer 1

尝试将box-sizing更改为pac-container到content-box

.pac-container {
  box-sizing: content-box;
  padding-right: 4px;
}

http://jsfiddle.net/bzx7dk2o/