How to scroll display flex div to bottom

Question

I can see traditionally you can set scrollTop of a div and scroll it to bottom like this one: http://jsfiddle.net/jPVAf/50/

But if my div is display: flex, the above technique won't work: http://jsfiddle.net/hoch47n6/. How do you use JS to scroll the div to bottom? Thanks!

I think it's not because of `display: flex` itself as of fact that you just can't scroll the div at all. Take a look at this question http://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content — Cheslab, Nov 05 '16 at 03:51

score 1 · Accepted Answer · answered Nov 05 '16 at 04:30

This is because of justify-content property.

And reset the properties of <p> and use line-height to let the jQuery take the actual height of the <p> tag

Here is the updated Fiddle (jsFiddle), have a look.

For reference,

/* Resetting <p> */
p {
  margin: 0;
  padding: 0;
  line-height: 50px;
}

Hope this helps!

How to scroll display flex div to bottom

1 Answers1