javascript - 在添加选项时保持选择框大小固定

Question

我有一个城市选择器选择选项，例如:

当我选择多个城市时，选择器的大小会像这样增加:

我想保持盒子的尺寸固定。有什么解决办法吗？

Answer 1

如果我明白了，那就是你想要的。具有任何变化的力最大宽度和高度。

.select {
  /** Want to have permanant width 150px **/
  width:150px;
  max-width:150px;
  background:lightblue;
  padding:3px;
  height:150px;
  overflow-y:auto;
  /** the magic think **/
  word-break:break-word;
}

.option {
  background:tomato;
  width:100%; /** or display block in your case (for the tags selected) **/
}

.option:nth-child(odd) {
  background:lightgreen;
}

<div class="select">
  <div class="option">testttt</div>
  <div class="option">testtttttttttttttttesttttttttttttttttesttttttttttttttt</div>
  <div class="option">testttttttttttttttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
  <div class="option">testttt</div>
</div>