How can i make a flex item fill its parents empty space when the parent gets resized?-CodePudding

As seen in this codepen, when the page is loaded, the orange box (area that gets filled with text over time) does not fill enough space to push the pink box (textarea to push text into orange box) to the bottom of the green box (div element to hold textwindow and textarea). however when i zoom in on the page itself it suddenly does. how do i achieve this behaviour without zooming in?

Im a beginner and i would like to not switch display options to float/block/grid/whatever. Beyond that i dont care how it is achieves (CSS/js).

Some relevant code at a glance:

.Menu{
     margin-left: 10%;
     margin-right: 10%;
     border: black solid 5px;
     display: flex;
     flex-direction: column;
     min-height: 300px;
     max-height: 90vh;
  }
  .MsgComposer{
     border: green solid 5px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     max-height: 90vh;
  }
  .MsgWindow{
     border: orangered inset 2px;
     border-radius: 5px;
     overflow-y: scroll;
     min-height: 75vh;
     max-height: 90vh;
  }
  .InputField{
     border: violet solid 5px;
     display: inherit;
     flex-flow: row;
     flex-wrap:nowrap;
     width:auto;
     align-items: flex-end;
     min-height: 1pt;
  }

    <div >
      <div >
    <div >
      <button id="MenuBTN" title="Menu" value="noHide" onclick="toggleVis('persistentBtn')"></button>
      <button id="showSrv" title="Show/Hide Servers" onclick="toggleVis('serverSelect')"></button>
      <button id="showUsr" title="Show/Hide Users  " onclick="toggleVis('userSelect')"></button>
    </div>
    <div >
      <div  id="ServerList">
        <b style="color: white;">Server:</b>
        <ul id="UserServerSelection">
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
          <li value="Server-1">serverPlaceholder</li>
        </ul>
      </div>
      <div  id="UserList">
        <b style="color: white;">Person:</b>
        <ul name="UserRecipientSelection" id="UserRecipientSelection">
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
          <li value="name">namePlaceholder</li>
        </ul>
      </div>
    </div>
    <div >
      <div  id="Messages">
        <!--Window with messages received/sent-->
      </div>
      <div >
        <textarea id="UserMessage" placeholder="Enter Text here..."></textarea>
        <button id="SelectAttachment" title="Attach something..." onclick="uploadFileName()">
          <input type="file" name="uploadFile" id="FileUpload">
        </button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Simply put flex-grow: 1; on .MsgWindow. This makes it grow vertically (because it's inside a flex-direction: column; element) to take up all remaining space.