Question

我有这个代码，我很好。但我在滚动方面遇到了问题。

我想给.b类赋一个宽度，我想要水平滚动。

我尝试将此代码添加到.b类：

width: 500px;
overflow-x: scroll;

但它不起作用。有滚动的flex wrap-reverse是否有错误？

我认为这是一个有趣的案例。对这个问题有任何想法吗？

注意：我需要橙色盒子的确切位置。我无法改变订单或包裹头寸。我只需要水平滚动。

.a {
  width: 100%;
}

.b {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  height: 600px;
  align-content: flex-start;
  width: 500px;
  overflow-x: scroll;
}

.c {
  width: 200px;
  height: 200px;
  background: orange;
}

.w {
  width: 200px;
  margin: 5px;
}

span {
  display: block;
}

<div class="a">
  <div class="b">
    <div class="w">
      <span>AAAA</span>
      <span>1</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>2</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>3</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>4</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>5</span>
      <div class="c">
      </div>
    </div>
  </div>
</div>

Answer 1

滚动CSS是overflow属性的函数。

但是，overflow仅适用于文字方向。

使用wrap-reverse，弹性项目的排列方向与文本方向（LTR）相反，因此overflow不适用，滚动条无效。

此处提供更多详细信息和可能的解决方法：

使用flex wrap-reverse的水平滚动不起作用

1 个答案: