How to make synchronous scaling of elements?

I've created ul-li drop-down menu. I used those tags because I added icons of flags (you'll see on pics). So, when I change size of window ul-element is scaled, and it's okay. But I also want to make scalable li-list.

So, this is how it looks:

ul-li list has to be like select-option drop-down menu. To be 'one' element.

As you can see window 'Preferences' is scalable with settings inside, but not li-element.

Here is scss:

#select-li {
  cursor: pointer;
  padding: 8px;
  font-size: 15px;
  border-bottom: 0.1px solid rgba(0, 0, 0, .1);
}
#select-ul {
  position: absolute;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  overflow-y:scroll;
} 

For any case, here is Vue code:

<ul v-if="showSortBy" id="select-ul">
   <li
     id="select-li"
     @click="defCountry = country; showSortBy = !showSortBy"
     v-for="country in countries"
     :key="country.key"
    >
     <img :src="country.src" width="18" height="18" alt="">
     
   </li>
</ul>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW