How to adjust a div correctly?

Question

I’m trying to do a chat input, but I’m having a hard time adjusting the input size with the buttons. The problem is that if I put the input of fixed size, in a larger cell phone may remain size. And I wouldn’t want to use absolute position on the buttons. What I’ve done so far It’s following: In case the orange frame and the red frame would be the send and attach buttons respectively. And the blue box would be the input.

Would some form of the orange button always be in the right maxima and the red button always maxima left and the blue input occupy the rest of the space between the buttons? I’m using flex display.

The screen size may then vary the width of caixao can be 900 or 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>

Answer 1

Use flex: 1 in the blue div. This will cause it to occupy the remaining area of the container minus the other two 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>