Align Div Container to the Bottom of a Display Flex

by

I have to build a Modular Window for a chat! I allready got a Toolbar and an Flex conatiner which gets filled. Now i got the Problem, that i want to add an Div for a chat input field. I tried nearly everything to align this thing to the bottom but nothing works.

Here is how it should look like:

enter image description here

“Message input” has to be aligned to the bottom

This is my actual HTML-Code:

<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden">
  <div class="toolbar_standard">
    <div class="toolbar_standard_control_row">
      <img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog">
      <div style="font-size: 20px; color: white">Chat</div>
      <div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div>
      <div style="..."></div>
    </div>
  </div>
  <div style="display:flex; height: 100%;">
    <div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;">
      <div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)">
        <div>
          <div>
            <p data-bind="html: name"></p>
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px">
      <div style="height: 80%; display: flex; flex-direction: column;">
        <div id="spinner" class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
        <div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px">
          <p data-bind="html: message, css: messageClassName"></p>
        </div>
        <div style="height: auto">
          <div class="input-field col s6" style="background-color: white; height: auto;">
            <input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;">
            <a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a>
            <label for="message_to_send">Nachricht</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And this is how it looks like in the Browser:

Here you can see that is is floating under the Div of the “Messages” and that its dynamically moving whit the size of the “Messages” Div!

enter image description here

How and where do i have to set the the alignment to the bottom?

41 thoughts on “Align Div Container to the Bottom of a Display Flex”

  1. First point: Don’t use inline CSS without any necessity.

    You can bring your message to bottom by positioning. Try to change your code as below

    Add position:relative to <div style="height: 80%; display: flex; flex-direction: column;"> and add position:absolute; bottom:0; to <div style="height: auto">.

    Edit: If it doesn’t bring your message to exact bottom, then you are suppose to work on the height of <div style="height: 80%; display: flex; flex-direction: column;"> on this part.

    Reply

  2. Add position: fixed; and bottom:0; to your message input container, to fix the width overlap issue just add property of width: inherit; that will take the width value of parent element.
    Otherwise you can assign the parent width to your message container dynamicly using JavaScript code :

    $(document).ready(()=> {
      var parentWidth = $('.parent-element').width();
      $('.message-container').width(parentWidth);
});
    Reply

Leave a Comment