JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexer">
  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>
</div>

CSS

.flexer {
  display: flex;
  flex-direction: column;
  
  /** 
  The container size has to be something,
  otherwise flex-grow won't work 
  **/
  height: 100%;
}

select {
  flex-grow: 1;
}

/**
  This just fixes "shortcommings" of jsfiddle:
**/
*{margin:0; padding:0;}
html, body{
    height: 100%;
}