CSS Input ou Div preencher espaço vazio automaticamente.

[Diogou]

Oi, como posso fazer com que o width de um input fique sempre preenchida?

Por exemplo:

https://jsfiddle.net/L62o1c3w/

Também como exemplo, o https://www.mercadolivre.com.br/, ao você reduzir a janela, ou utilizar smartphone, a barra de pesquisa superior sempre fica 100% preenchida sem deixar espaços.

 

No jsfiddle, tenho um input, e quero que ele fique no máximo de largura possível, removendo o espaço vazio que existe entre o input e "login".

Como posso fazer isto?

 

usar width 100% não funciona.

[washalbano]

Os dois exemplos que você enviou usam width:100%
https://jsfiddle.net/L62o1c3w/4/

Provavelmente depende da largura disponível do elemento pai.

 

[Diogou]

@washalbano Obrigado pela ajuda. Eu consegui resolver com o calc do css que até agora desconhecia.

 

https://jsfiddle.net/L62o1c3w/37/

Pra quem quiser saber fazer:

 

Basicamente, você precisa ter width defenidos tanto no lado direito, como na lado esquerdo. após isso, pego todos valores, no caso do jsfiddle, deu 270 (width de todos botões) e subtraia.

 

Coloca o input dentro de uma div, e tanto o input como a div com width 100%. Porém, apenas na div pai da div, você coloca:

width: calc(100% - 270px); Ou seja, você subtraiu o valor 100% da janela, com o tamanho dos botões, dessa forma o input sempre vai ficar preenchendo o local vazio, independente do tamanho da janela.