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">
