2

Estou tentando fazer um input de chat, porém estou com dificuldade de ajustar o tamanho do input com os botões. O problema e que se eu colocar o input de tamanho fixo, em um celular maior pode sobrar tamanho. E Eu não gostaria de usar posição absoluta nos botões. O que fiz até agora Está a seguir: No caso o quadro laranja e o quadro vermelho seriam os botões de send e de anexar respectivamente. E a caixa azul seria o input.

Teria alguma forma do botão laranja sempre estar na maxima direita e o botao vermelho sempre maxima esquerda e o input azul ocupar o restante do espaço entre os botões? Estou usando display flex.

O tamanho da tela pode variar então o width de caixao pode ser 900 ou 300.

.botao1 {
  width: 40px;
  background: red;
  height: 40px;
}

.botao2 {
  width: 40px;
  background: orange;
  height: 40px; 
}

.input1 {
  background: blue;
  width: 80%;
  height: 100px;
}

.caixao {
  width: 500px;
  display: flex;
  background: pink;
}
<div class="caixao">
  <div class="botao1">1</div>
  <div class="input1"></div>
  <div class="botao2">2</div>
<div>

1 Resposta 1

2

Use flex: 1 na div azul. Isso fará com que ela ocupe o restante da área que sobrou do contêiner menos as outras duas divs:

.botao1 {
  width: 40px;
  background: red;
  height: 40px;
}

.botao2 {
  width: 40px;
  background: orange;
  height: 40px;
}

.input1 {
  background: blue;
  height: 100px;
  flex: 1;
}

.caixao {
  width: 500px;
  display: flex;
  background: pink;
  align-items: stretch;
}
<div class="caixao">
  <div class="botao1">1</div>
  <div class="input1"></div>
  <div class="botao2">2</div>
<div>

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 .