如何获取搜索栏以填充剩余的100％水平div空间？

#main {
  border: 1px solid black;
  font-size: 20px;
  font-weight: bold;
  color: white;
  display: flex;  /* use this instead of floats */
}

#left {
  flex-grow: 1;  /* make this grow to fill remaining space */
}


#left input {
   width:100%;   /* optional - make the input fill the div */
}

#center {
  width: 230px;
  background-color: blue;
}

#right {
  width: 45px;
  background-color: green;
}

<div id="main">
  <div id="left">
    <input type="text" name="q" id="q" placeholder="Search by Name or Contact Info">
  </div>
  <div id="center">
    <div class="dropdown bootstrap-select show-tick select-picker navbar-margins">
      <select name="tag_id[]" id="tag_id_" class="select-picker navbar-margins" data-actions-box="true" data-selected-text-format="count > 1" data-title="No Tags Selected" data-deselect-all-text="Select None" multiple="multiple" tabindex="-98"></select>
    </div>
  </div>
  <div id="right">
    <button name="button" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</div>