Растягивание input на всю форму

подскажите, к сожалению ответ не нашел, глуп или еще что то - как растянуть инпут на всю ширину блока процентами, задав ширину(пикселями получается, но не могу понять почему проценты не работают)

<div>
         <form class="search">
            <label>
               <input class="search-field" type="search" placeholder="Найти...">
            </label>
            <button class="search-button" type="submit">
            </button>
         </form>
</div>

div{
  width:280px;
}


.search{
 display:flex;
}

.search-field {
   min-width: 80%;
   background-color: #f4f7f6;
   border: none;
   padding: 18px 0 18px 20px;
}

.search-button {
   width:50px;
   background-color: #b59f5b;
   border: none;
}