Изменение размера input в соответствии с размером в формы flexbox

Question

При уменьшении размера поле input выходит за края формы:

.form-container { width: 230px; }

Можно ли как-то динамически уменьшить поле input, чтобы не не нарушить форматирование, и сохранить выравнивание чтобы оно осталось в форме?

Answer 1

Поскольку у Вас input помещен внутрь тега label, то реализация концепции responsive относительно исходного макета будет неполноценной.

Можно задать максимальные размеры для каждого input'a:

input {
  max-width: 60%;
}

что позволит сохранить форматирование и динамически реагировать на изменение размеров.

Имейте ввиду что Вам нужно будет настроить размеры input'ов селективно, так как их условия не равны.

Что бы получить полный контроль над позиционированием Вы можете разнести label и input и используйте для их выравнивания систему CSS Grid.