How to add scroll to datalist in html?

<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>

I use input text and datalist to show my data. My data has many but I can't use scroll in it. and this is my 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;
      }
 }

can you know me where css is wrong? thanks so much!