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?

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

Leave a Comment