0

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.

1 Resposta 1

3

Olá! aplique a propriedade "display:flex" na div pai, que permitirá a flexibilização do arranjo dos seu elementos filhos e na div que irá ficar com o restante do espaço do container a propriedade "flex-grow: 1", que fará com que ela "cresça" até ocupar o espaço total restante. Troquei a cor da classe filho2 para facilitar a visualização. Talvez no snippet não haja espaço suficiente para visualizar, coloque para abrir na tela toda. Mas pode copiar o css e testar que está correto.

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

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .