溢出自动无法使用justify-content：flex-end

Question

我正在尝试获取一个元素，使项目与右边对齐，并且所有溢出的元素都被隐藏但可以通过滚动条访问。

但是在指定<script> (function iife() { "use strict"; document.querySelector(".myLink1").classList.add("hide"); var playButton = document.querySelector(".playButton1"); playButton.addEventListener("click", firstClick); function firstClick() { document.querySelector(".myLink1").classList.remove("hide"); var button = document.querySelector(".playButton1"); var player = document.querySelector("#player1"); document.querySelector('.playButton1 .initial1').style.display = 'none'; playButton.addEventListener("click", playButtonClickHandler); document.querySelector(".playButton1 .play1").style.display = "inline-block"; document.querySelector(".playButton1 .pause1").style.display = "none"; button.classList.add("playing"); } function playButtonClickHandler() { player.volume = 1.0; if (player.paused) { document.querySelector(".playButton1 .play1").style.display = "none"; document.querySelector(".playButton1 .pause1").style.display = "inline-block"; player.play(); } else { document.querySelector(".playButton1 .play1").style.display = "inline-block"; document.querySelector(".playButton1 .pause1").style.display = "none"; player.pause(); } } }()); </script> 时似乎滚动条消失了。为什么会这样，我该如何解决？

以下是演示：https://jsfiddle.net/efguz4mp/1/

justify-content: flex-end

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  justify-content: flex-end;
}

.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

...这里是没有<div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>的演示：https://jsfiddle.net/efguz4mp

justify-content: flex-end;

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
}

.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

Answer 1

当左侧（或顶部）发生溢出时，滚动不会被渲染，原因是HTML文档的正常流是从左到右（从上到下）。

Flexbox有一个行反向方向，可以解决这个问题，我认为有两件事情可以解决：

• 需要重新排序项目或使用内部包装

• 一.a。 Firefox和Edge不显示滚动（可能的错误）

Stack snippet

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  flex-direction: row-reverse;
  overflow: auto;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

/* no wrapper */
.row > .box:nth-child(1) { order: 6; }
.row > .box:nth-child(2) { order: 5; }
.row > .box:nth-child(3) { order: 4; }
.row > .box:nth-child(4) { order: 3; }
.row > .box:nth-child(5) { order: 2; }
.row > .box:nth-child(6) { order: 1; }

/* wrapper */
.inner {
  display: flex;
}

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<div><br><br></div>

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

可能的解决方法是：

• 使用direction: rtl更改流向

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  direction: rtl;
}
.inner {
  display: flex;
  direction: ltr;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

• 使用transform翻转row元素

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
  transform: scale(-1,1);        /*  flip horizontally  */
}
.inner {
  display: flex;
  transform: scale(-1,1);        /*  reset so items is not backwards  */
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

• 使用页面加载上的脚本滚动到右侧

window.addEventListener("load", function(e) {
  var el = document.querySelector(".row");
  el.scrollLeft = el.scrollWidth;
});

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  display: flex;
  overflow: auto;
}
.box {
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Answer 2

主要问题是你正在处理矛盾：

• justify-content属性旨在分配容器中的额外空间。

• 但是，如果容器中没有剩余空间，则会出现overflow条件。

基本上，justify-content和overflow没有关联。前者仅适用于内部容器。后者仅适用外部容器。

使用justify-content: flex-end时，必须在容器的末尾打包flex项（而不是flex-start溢出区域的末尾）。

如果末端对齐的项目太大而无法容纳在容器中，它们将在开始时溢出，这是您在布局中看到的内容。但由于overflow属性仅适用于写入模式（在本例中为LTR），因此不会呈现滚动条（more details）。

所以我建议忘记justify-content使这个布局工作。

相反，请考虑以下事项：使用不可见的间隔项将您的内容项目推向右侧。

＆＃13;

＆＃13;

.row {
  display: flex;
  overflow: auto;
  max-width: 500px;
  background: #DADADA;
}

.box {
  flex: 0 0 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
}

.row::before {
  content: "";
  flex: 0 0 400px;
  visibility: hidden;
}

＆＃13;

<div class="row">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您会注意到最后一个项目边距会崩溃。这个问题在这里解释：

• Last margin / padding collapsing in flexbox

Answer 3

以下是我建议你这样做的方式

.row {
  width: 100%;
  max-width: 500px;
  background: #DADADA;
  flex: 1;
    display: flex;
    overflow: auto;
}
.box {
  display: flex;
  width: 200px;
  height: 40px;
  margin: 4px 10px;
  background: red;
  flex-shrink: 0;
}

<div class="row">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>