flex布局jusify-content设置为flex-end之后使用overflow-x: scroll就不起作用了

Question

CSS代码如下:

.col {
  width: 100%;
  ...
}

.block-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  ...
}

.scroll-dx {
  overflow-x: scroll;
  ...
}

HTML代码如下：

<div class="col block-flex scroll-dx">我要能够滚动我要能够滚动我要能够滚动我要能够滚动<div>

设置为flex-start的时候是能够滚动的

Answer 1

改变主轴方向，不要使用主轴的对齐方式

.col {
  width: 100%;
}

.block-flex {
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: flex-end; */
  align-items: center;
  white-space: nowrap;
}

.scroll-dx {
  overflow-x: auto;
}

<div class="col block-flex scroll-dx">0我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动我要能够滚动1<div>

Answer 2

哈哈 这个问题是很坑的，flex布局确实存在此问题，而且让人摸不着头脑，设置为center或者flex-end都是存在这个问题的。而且没有一个统一的处理方案，但是针对具体需求可以调整写法来实现。

Answer 3

在 stackoverflow 找到了解决方案。。

链接: https://stackoverflow.com/que...