2

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">
DavidPostill
  • 7,734
  • 9
  • 41
  • 60
John Smiths
  • 119
  • 9

2 Answers2

2

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Yikes— in reference to my question here (https://stackoverflow.com/questions/49503733/overflow-scroll-y-not-working-with-flexbox), is this the only way to "stack" elements in a container? – user3871 Mar 31 '18 at 04:37
1

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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64