0

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">
aferber
  • 1,121
  • 10
  • 15
John Smiths
  • 119
  • 9
  • The example would have been more impressive if the timeout function only set the CSS and didn't scroll or add any HTML. – Mr Lister Feb 06 '17 at 18:08
  • This question is the same as your previous one. Feel free to edit that question with more details, if any. Posting a duplicate of your previous question won't help you. http://stackoverflow.com/q/41863033/3597276 – Michael Benjamin Feb 06 '17 at 18:08
  • I also posted an answer to your previous question. You can comment if it's not helpful or you have questions. – Michael Benjamin Feb 06 '17 at 18:10
  • @Michael_B, but i want to start the first input on bottom of the div. – John Smiths Feb 06 '17 at 19:25

0 Answers0