Как заполнить оставшуюся ширину элементом ввода, но без обёртки?

Для того чтобы заполнить оставшуюся ширину элемента ввода без использования обертки, мы можем воспользоваться свойством calc() и flexbox.

calc() позволяет вычислять значения на основе математических операций. flexbox предоставляет возможность управлять распределением пространства внутри контейнера.

Этот подход особенно полезен, когда у нас есть элементы ввода и другие элементы на одном уровне, и нам нужно, чтобы элементы ввода заполняли все оставшееся пространство.

Вот пример кода:

HTML:

<div class="container">
  <input type="text" class="flex-input" placeholder="Введите текст">
  <button class="btn">Отправить</button>
</div>

CSS:

.container {
  display: flex;
}

.flex-input {
  flex: 1;
}

.btn {
  /* Необязательные стили для кнопки */
  padding: 10px 20px;
}

В этом примере мы создали контейнер с классом .container, внутри которого находятся элементы ввода и кнопка.

Используем свойство flex у элемента ввода с классом .flex-input. Значение flex: 1 указывает браузеру, что этот элемент должен занимать все доступное пространство внутри контейнера.

Таким образом, элемент ввода будет автоматически заполнять оставшуюся ширину контейнера, позволяя кнопке занимать только необходимое для неё пространство.

Такой подход гибок и позволяет легко масштабировать и изменять размеры элементов ввода и других элементов на странице без использования обертки.