Flexbox Example

by bizamajig

HTML

<div class="conversation">
<div class="messages-container">
  <div class="scroll">
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    <a href="#" class="scrollActionEl" >Click Me to scroll to bottom and increase input size!</a><br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
    Long long content!<br/>
  </div>
</div>
<div class="input-container">
<hr/>
This text area will shrink back when not in focus.
<textarea class="text-input" placeholder="Type your message here..."></textarea>
</div>
</div>

CSS

html,body{
  height:100%;
  margin:0px;
  padding:0px;
  font-family:Roboto, sans-serif;
}
.conversation{
  -webkit-display:flex;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  align-content:stretch;
  height:100%;
}

.messages-container{
  order:1;
  flex:0.9 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  align-content:stretch;
}

.scroll{
  flex:1 0 auto;
}

.input-container{
  order:2;
  flex:0.1 0 auto;
}
.text-input{
  width:80%;
}

JavaScript

$(".scrollActionEl").on("click", function(e){
  e.preventDefault();
	var input = $(".text-input");
  input.focus();
  var div = $(".messages-container");
  div.scrollTop(div.get(0).scrollHeight);
});

$(".text-input").on("blur", function(e){
	$(".text-input").attr("rows", 2);
}).on("focus", function(e){
	$(".text-input").attr("rows", 4);
});