div content preventing sibling from increasing in size

Question

I am building a chat page. I have two divs stacked vertically using flexbox. The top is meant to be where you view the messages, and the bottom is where the user will input their text.

The top div I want to take as much space as available. The bottom div height I want to be set, and as I change its height value the top div should change to take up 100% of available space.

I've been able to get this to work simply setting the top div to height 100% and setting the bottom height to some specific height. The problem is when the top div is full with content, setting the height of the bottom div to be large it doesn't squish the top div and expand the bottom.

Code pen to view the problem: https://codepen.io/dante-e/pen/PoLJOwL

**in the codepen i can set the input div height to any height that is large enough to shrink the view div and it doesn't change, 400px is just an example.

<div class="wrapper">
  <div class="box">
    <div class="view">
      "large body of text"
    </div>
    <div class="input">
    </div>
  </div>
</div>

}
.wrapper {
    padding: 20px 40px 40px 40px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
}

.view {
    height: 100%;
    border: 1px solid blue;
    color: white;
}

.box{
    display: flex;
    flex-flow: column;
    height: 100%;
    border: 1px solid red;
}

.input{
    height: 400px;
    border: 1px solid green;
}

Answer 1

in css .view add overflow: auto;