如何使溢出对象可滚动或从右侧开始？

Posted 2023-03-06

【中文标题】如何使溢出对象可滚动或从右侧开始？

【英文标题】：How to make an overflow object scrollable or start from the right?

【发布时间】：2021-11-25 06:48:07

【问题描述】：

我正在尝试重新创建 github 的热图。我正在使用来自uiws 的包来构建热图，但是，在较小的屏幕上，我想让热图在 x 方向上可滚动，或者让热图从右侧边缘开始，以便显示最新日期。请参阅下面的图片以更好地了解我的意思。

我目前的方法是将热图的宽度设置为设定的宽度，例如 700px 和overflow:hidden 当屏幕尺寸减小时。但是，使用这种方法，当屏幕宽度减小时，热图的右侧会被切断。我想让左边被切断。或者，这可以左右滚动，但是当我尝试 overflow: scroll 时无法实现。

当我深入研究检查器工具时，Github 的方法是将热图周围的容器设置为 flex 和 align-items:flex-end，但是当我尝试此解决方案时，热图并没有向右移动。

这是CodeSandbox上的条带化版本的链接

如图所示，最新日期被推到右侧。

【参考方案1】：

你试过了吗：

div.scrollArea 
  overflow: auto;
  white-space: nowrap;

【讨论】：

我有，还是一样的效果