当父项调整大小时，如何使弹性项填充其父项的空白空间？

Question

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 class="Menu"> <div class="MsgAndInput"> <div class="persistentBtn"> <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 class="Select"> <div class="serverSelect" 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 class="userSelect" 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 class="MsgComposer"> <div class="MsgWindow" id="Messages"> <.--Window with messages received/sent--> </div> <div class="InputField"> <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>

Answer 1

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.