溢出自动不适用于 justify-content:flex-end [英] Overflow auto not working with justify-content: flex-end

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

问题描述

我试图让一个元素的项目向右对齐，并且所有溢出的元素都被隐藏但可以通过滚动条访问.

但是当指定justify-content: flex-end时，滚动条似乎消失了.为什么会这样，我该如何解决?

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

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；溢出:自动；justify-content: flex-end;}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}

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

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

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；溢出:自动；}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}

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

解决方案

当向左(或顶部)发生溢出时，不会渲染滚动，原因是 HTML 文档的正常流向左-从上到下(从上到下).

Flexbox 有一个 row-reverse 方向，这将解决这个问题，认为 2 件事随之而来:

  • 需要对物品重新排序或使用内部包装器

  • I.a.Firefox 和 Edge 不显示滚动(可能是错误)

堆栈片段

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；flex-direction: 行反向；溢出:自动；}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}/* 没有包装 */.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;}/* 包装 */.内{显示:弹性；}

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

<小时>

可能的解决方法是:

  • 使用direction: rtl改变流向

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；溢出:自动；方向:rtl；}.内{显示:弹性；方向:ltr;}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}

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

  • 使用transform翻转row元素

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；溢出:自动；变换:比例(-1,1)；/* 水平翻转 */}.内{显示:弹性；变换:比例(-1,1)；/* 重置所以项目不向后 */}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}

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

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

.row {宽度:100%；最大宽度:500px；背景:#DADADA；显示:弹性；溢出:自动；}.盒子 {宽度:200px；高度:40px；边距:4px 10px；背景:红色；弹性收缩:0；}

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

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:

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:

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

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

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

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