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

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

Answers:

Answer

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:

Answer

The same reason when something overflows to the left or top of body, you can't scroll to the left or "up" to see the overflow. The point from which you begin scrolling for body begins at the top/left body. Just like the scroll point for this div begins at the beginning/top of the div. You can't scroll into a negative position in the div, just like you can't scroll into a negative position in body.

div {
  background: red;
  height: 100px;
  width: 100px;
  position: absolute;
}
.left {
  top: 0;
  left: -50px;
}
.right {
  top: 0;
  right: -50px;
}
.top {
  top: -50px;
  left: 50%;
}
.bottom {
  bottom: -50px;
  left: 50%;
}
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.