If html content is not enough to overflow y, stick to bottom - html

Question

This image probably explains best.
I have this chat functionality, very basic at the moment. When there's is enough text to overflow the page, it gives the behavior I want. The most recent message is just above the message input at the bottom. However, when there is only a few messages, the messages that exist are at the top and it leaves a big empty space between it and the message input.
Here is the relevant HTML. The text input is just position: fixed at the bottom of the screen and there's a bottom-margin on #message_outer_parent to keep it above it.
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb" "=""></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
I would like to have the messages just above the message input, even when there's only a few messages. How can I accomplish this?

Answer 1

Fixed position on the other div.
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
position: fixed;
left: 0;
bottom: 30px;
max-height: calc(100vh - 30px);
overflow: auto;
width: 100vw;
padding: 5px;
box-sizing: border-box; /*padding and border won't increase height and width*/
}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
Using flexbox
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
height: 100vh;
width: 100vw;
padding: 5px 5px 30px 5px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
}
*{margin: 0;}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>