Как растянуть input's на всю ширину используя флекс?

Question

[buzzloud]

Всем привет, мучаю форму, которую делаю на флексах. И вроде бы все окей, но столкнулся с небольшой загвоздкой и непонятно как решить. В общем есть такой блок:

Как вы видите в нём нужно инпуты растянуть на всю ширину контейнера. Вроде бы ничего сложного, задал себе flex-grow и радуйся. Но... По структуре разметки и использования флексов эти инпуты лежат внутри обертки, которому flex-direction задан column. Вот собственно и всё. Я так понимаю поэтому они и не тянуться. И как быть? Может в целом разметку надо изменить или флекс как-то по другому использовать? Подскажите, плз) Исходник

Comments

[Алексей Струков]

У остальных элементов в ряду ширина фиксированная?

[buzzloud]

Да, кроме инпутов

[Алексей Струков]

buzzloud: посмотрел код. Там структуру надо по хорошему менять. И к тому же есть неработающие селекторы. Попозже напишу как правильно надо.

[buzzloud]

Ok, спасибо

Answer 1

[Danila]

input {
 flex: 1;
}

flex-direction: column у вас задан врапперу, а инпуты лежат в form-group у которого flex-direction не задан, т.е по-умолчанию row.
а изначально у вас ошибка в селекторе

.form-order__fio input {
  flex-grow: 1;
}

которого не существует

Comments

[buzzloud]

Спасибо, получается, что я не "досмотрелся" до дивов form-group и как вы сказали для них в этом случае работает правило по умолчанию row. Возьму на заметку.

Answer 2

[Алексей Струков]

Вот одно из решений:
codepen.io/anon/pen/QENbgP?editors=1100
Можно еще задать фиксированную ширину для label и вычислять ширину input с помощью calc(), но это уже совсем другая история)

Comments

[buzzloud]

Спасибо, возьму на заметку и ваш вариант)