javascript - 无法使用 justify-content : flex-end 获得垂直滚动条

Question

每当我使用 justify-content: flex-end; 时，我都会遇到滚动条问题。我禁用了滚动条如何修复。希望有人能帮助我。

重建

$(".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

这似乎是一个错误。

有一些变通办法，但它们在浏览器中可能很复杂且不可靠。

例如，在您的代码中，如果您反转 HTML 中内容的顺序，并将 flex-direction 切换为 column-reverse，您将获得滚动条... 在 Chrome 中(在 FF 或 Edge 中不起作用)。

jsFiddle demo

以下是一些可能有用的引用资料:

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