Заполните ширину div кнопкой и введите

Question

Мне нужно заполнить элемент div кнопкой и ввести.Кнопка будет иметь точную ширину, а остальные будут заполнены вводом.В моем коде я даже не могу установить ширину кнопки, а ввод всегда шире родительского.

Затем я установлю overlay: hidden на .bar, чтобы ввод с помощью кнопки выглядел так, как я хочу.Но для того, чтобы вести себя так, как я хочу, мне нужно правильно установить упомянутую ширину.Так, что я мог сделать, чтобы заполнить этот родительский div этой кнопкой точной ширины и ввода для остальной его ширины, но не более того?Я пробовал много свойств, ничего не помогло.Единственное условие, что я хочу, чтобы display: flex оставалось в коде, все остальное можно изменить.Спасибо за предложения.

.container {
  width:205px;
}

.bar {
  border-radius: 25px;
  box-sizing: border-box;
  display: flex;
  //overflow: hidden;
}

.bar_input {
  font-size: 15px;
  height: 20px;
  box-sizing: border-box;
  width: 100%;
}

.bar_button {
  padding: 8px 8px 14px 1px;
  width: 37px;
  height: 35px;
  left: 3px;
  right: auto;
}

 <div class="container u-l-fr" style="background-color: darkred">
    <div class="container-bar" style="background-color: darkblue">
      <div class="bar" style="background-color: gold">
        <button aria-label="Search" class="bar_button" role="button" type="button" style="background-color: black;"></button>
        <input class="bar_input" id="search_input" placeholder="Search">
      </div>
    </div>
</div>

Answer 1

Это потому, что ширина вашего контейнера меньше ширины по умолчанию, назначенной элементу <input>.Таким образом, вы можете увеличить width вашего контейнера или использовать этот код.

.bar_input {
  font-size: 15px;
  height: 20px;
  box-sizing: border-box;
  width: calc(100% - 37px);
}

Answer 2

Используя bootstrap, вы можете добавить класс к кнопке .btn-block В противном случае вы можете добавить ширину стиля: 100%;на кнопку