Como fazer um div preencher a largura restante com Css puro

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.

.pai {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
}

.filho1 {
  background-color: red;
}

.filho2 {
  background-color: blue;
  flex-grow: 1;
}

<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>