Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here.
The Scenario
I am currently developing a real-time chat website. The layout of the website is structured using body { display: grid }. It consists of three columns: one for the list of chats, another for displaying messages in the selected chat, and the third for showing online users in the selected chat. The first and third columns should each occupy 20% of the page width, while the middle column (messages display area) needs to adjust its width dynamically based on available space, which in this case is 60% of the page width. I have no concerns about the first and third columns; my focus is solely on the middle column.
The middle column will contain a chat area where messages appear and a form at the bottom with an input field and a submit button. Currently, the middle column is not styled using display flex or display: grid.
My Objective
As new messages populate the chat area, the container div will eventually overflow. To handle this, I've applied overflow: auto to the container div to display scrollbar if necessary. However, due to the existence of margin between the div and the form, the scrollbar only affects the div, leaving the form unaffected.
I aim to position the form at the bottom of the container div while ensuring that overflowing messages visually flow under the form as shown in this example image [link]. When users scroll upwards, the messages should appear to go "under" the input. If further clarification is needed, feel free to ask.
Attempts Made and Challenges Faced
To keep the form fixed at the bottom, I experimented with adding position: fixed and bottom: 0 styling properties to the form. This resulted in the desired outcome, aligning the form at the bottom [image link]. Subsequently, when sending a message, the formatting remained intact [image link], demonstrating successful implementation.
However, upon testing the message overflow behavior, I noticed that after a certain number of messages, the form lost its alignment, progressively moving downwards with additional messages until partially obscured [image link]. With continued messaging, the form would eventually disappear off the page entirely.
Sample Code Snippet
If you wish to review the code for better understanding, here's a snippet of what I've currently implemented:
[Code snippet block]
If you require clarification on any aspect, please leave a comment below, and I'll be happy to assist. I have been grappling with this issue for a few days now, so any help or guidance is greatly appreciated. Thank you for your assistance in advance.