如何在html中添加滚动到datalist？

Question

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}"
       value="$select.selected"
       ng-model="icon.name"
       list="classIcon"
       ng-change="changeFn(icon.name)">
   <i class="{{$select.selected}}"></i> &nbsp;
   {{$select.selected}}
   <datalist class="data-scrollable" id="classIcon" onscroll="addMoreItems()">
      <option ng-repeat="icon in classService.classesAwesome | limitTo:infiniteScroll.currentItems track by $index "
            infinite-scroll="addMoreItems()"
            infinite-scroll-distance="2">
              <i class="{{icon}}"></i> &nbsp;
              <span ng-bind-html="icon | highlight: $select.search"></span>
      </option>
</datalist>

我使用输入文本和datalist来显示我的数据。我的数据有很多，但我不能在其中使用滚动。 这是我的css：

.datalist{
      overflow-y: scroll;
      width: 20px;
      height: 24px;
      .icon{
        font-weight: normal;
        height: 24px;
        width: 20px;
        display: inline-block;
      }
      .highlight {
        background: yellow;
        font-weight: bold;
      }
 }

你能告诉我css哪里错了吗？ 非常感谢！