溢出自动不与justify-content：flex-end一起工作 [英] Overflow auto not working with justify-content: flex-end

查看：492
本文介绍了溢出自动不与justify-content：flex-end一起工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让一个元素有对齐的权利，所有溢出的元素被隐藏，但滚动条访问



但似乎是滚动条在指定 justify-content：flex-end 时消失。为什么是这样，我该如何解决它？



这里是演示： https://jsfiddle.net/efguz4mp/1/ 

  .row {width：100％; max-width：500px;背景：#DADADA;显示：flex;溢出：自动; justify-content：flex-end;}。box {width：200px; height：40px; margin：4px 10px;背景：红色; flex-shrink：0;} < div class = 行 > < 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>

...这里是演示 justify-content：flex-end; ： https://jsfiddle.net/efguz4mp 

  .row {width：100％; max-width：500px;背景：#DADADA;显示：flex; overflow：auto;}。box {width：200px; height：40px; margin：4px 10px;背景：红色; flex-shrink：0;} < div class = 行 > < 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>

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



Flexbox有一个 row-reverse 方向，这将解决这个问题，与此：


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


  • Ia Firefox和Edge不显示滚动（可能的bug）

    $ b

    Stack snippet



    .row {width：100％; max-width：500px;背景：#DADADA;显示：flex; flex-direction：row-reverse; overflow：auto;}。box {width：200px; height：40px; margin：4px 10px;背景：红色; 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>


    $ b $ hr b

    可能的解决方法是：


    • 使用方向：rtl 改变流向



      .row {width：100％; max-width：500px;背景：#DADADA;显示：flex;溢出：自动;方向：rtl;}。inner {display：flex;方向：ltr;}。box {width：200px; height：40px; margin：4px 10px;背景：红色; flex-shrink：0;} < div class = 行 > < 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>


    $ b


    • 使用转换来翻转行元素


    .row {width：100％; max-width：500px;背景：#DADADA;显示：flex;溢出：自动; transform：scale（-1,1）; / *水平翻转* /}内部{display：flex; transform：scale（-1,1）; / *重置，所以项目是不倒退* /}框{宽度：200px; height：40px; margin：4px 10px;背景：红色; flex-shrink：0;} < div class = 行 > < 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>


    $ b


    • 在页面加载时使用脚本滚动到右侧


      • $ b 

        window.addEventListener（load，function（e）{var el = document.querySelector（。row）; el.scrollLeft = el.scrollWidth;}）;

      .row {width：100％; max-width：500px;背景：#DADADA;显示：flex; overflow：auto;}。box {width：200px; height：40px; margin：4px 10px;背景：红色; flex-shrink：0;} < div class = 行 > < 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>

      I'm trying to get an element to have items aligned to the right, and all overflowing elements to be hidden but accessed by scrollbar.

      But it seems like the scrollbar disappears when specifying justify-content: flex-end. Why is that, and how do I fix it?

      Here is demo: https://jsfiddle.net/efguz4mp/1/

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

      ...and here is demo without justify-content: flex-end;: https://jsfiddle.net/efguz4mp

      .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"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

      解决方案

      When an overflow occur to the left (or top), a scroll doesn't get rendered, and the reason is that a HTML document's normal flow is left-to-right (top-to-bottom).

      Flexbox has a row-reverse direction, which will solve that, thought 2 things comes with that:

      • One need to reorder the items or use an inner wrapper

      • I.a. Firefox and Edge doesn't show the scroll (possible bug)

      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>

      Possible workarounds are:

      • Use direction: rtl to change the flow direction

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

      • Use transform to flip the row element

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

      • Use a script on page load to scroll to the right

      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>

      这篇关于溢出自动不与justify-content：flex-end一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

      查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆