tenho o seguinte codigo html:
<div class='pai'>
<div class='filho1'> Texto Qualquer que eu não sei o tamanho de caracteres </div>
<div class='filho2'> Componente que deve preencher a largura restante </div>
</div>
Preciso que '.filho1' tenha o seu tamanho de acordo com o seu conteúdo e que .filho2 preencha o espaço restante até atingir o limite da largura do '.pai'
Sei que as div .filho1 e .filho2 herdam as propriedades do pai portanto deixei o css da seguinte maneira
.pai{
margin: 0;
padding: 0;
width: 100%;
}
.filho1{
width: auto;
background-color: red;
}
.filho2{
width: 100%;
background-color: red;
}
porem quero que filho 2 tenha o tamanho de ( (100% de .pai) - (width de .filho1) ) e estou com dificuldades.