 <p>Flexbox can do that:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.chatbox { margin: 1em auto; width: 150px; height: 500px; border: 1px solid grey; display: flex; flex-direction: column-reverse; justify-content: flex-start; text-align: center; } .message { background: lightgreen; margin-bottom: .25em; padding: .25em 0 0 0; border-bottom: 2px solid green; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chatbox"&gt; &lt;div class="message"&gt;MESSAGE 1&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 2&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 3&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 4&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 5&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 6&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 7&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 8&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 9&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 10&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 11&lt;/div&gt; &lt;div class="message"&gt;MESSAGE 12&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>