Почему input не ужимается до родительского блока?

Question

[DTX]

https://jsfiddle.net/DTX_/remhm2pu/

Answer 1

[DTX]

flex-grow: 1;
width: 10px;
max-width: 150px;

https://jsfiddle.net/exuwrgjw/

Answer 2

[Cyber_bober]

а как он узнает что ему надо ужиматься? стилей нет
https://jsfiddle.net/remhm2pu/1/

Comments

[DTX]

Так в том и вопрос, что нужно добавить, чтобы он нормально сжимался-растягивался. Статика в width не катит.

[Cyber_bober]

DirecTwiX: ну задайте ему width:100%;

[DTX]

Cyber_bober: тогда не будет учитывать padding родительского блока

[Cyber_bober]

DirecTwiX: ну епт) box-sizing:border-box;

[DTX]

Cyber_bober: уже лучше)
А если слева будет какой-нибудь span неизвестной ширины?)
https://jsfiddle.net/DTX_/remhm2pu/

[Cyber_bober]

DirecTwiX: в контейнеры обернуть, не? https://jsfiddle.net/remhm2pu/4/

[DTX]

Cyber_bober: не элегантно же) вон глянь, как во флексе получилось)