javascript - Can't get vertical scrollbar with justify-content: flex-end

Question

I have a scrollbar problem whenever I use justify-content: flex-end;. I disabled the scrollbar how can this be fixed. Hope someone can help me.

RECONSTRUCTION

$(".input").on("keydown", function(e) {
  if (e.keyCode === 13) {
    $(".text").append($("<p />", {
      html: $(".input").val()
    }))
    e.preventDefault()
    $(".input").val("")
  }
})

// AUTO INPUT

for (var i = 0; i < 10; i++) {
  $(".text").append($("<p />", {
    html: "test"
  }))
}
$(".text").append($("<p />", {
  html: "Now we see that the scrollbar works, its now gonna add <b>justify-content: flex-end;</b> than you see the scrollbar disables it self in 6 seconds"
}))

$(".text").scrollTop($(".text")[0].scrollHeight);

setTimeout(function() {
  $(".text").css("justify-content", "flex-end");
  $(".text").append($("<h3 />", {
    html: "justify-content: flex-end; is added and scrollbar is disabled"
  }))

  $(".text").scrollTop($(".text")[0].scrollHeight);
}, 6000)

.text {
  height: 10em;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
p {
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="text">
  </div>
</div>
<input type="text" class="input">

Answer 1

This appears to be a bug.

There are some workarounds, but they can be hacky and unreliable across browsers.

For instance, in your code, if you reverse the order of content in the HTML, and switch the flex-direction to column-reverse, you get your scrollbar... in Chrome (didn't work in FF or Edge).

jsFiddle demo

Here are a few references that may be useful:

• Use justify-content: flex-end and to have vertical scrollbar
• flexbox justify-content: flex-end breaks scroll
• Bug 962501 - when justify-content: flex-end, overflow auto. when content overflows scrollbars dont show
• justify-content: flex-end and overflow: auto don't play along