如何让溢出元素可横向滚动或右对齐，实现GitHub热图小屏适配？

方案1：小屏自动裁剪左侧、固定展示右侧最新日期（无滚动，无需JS） #

给热图外层容器添加以下样式即可：

.heatmap-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  /* 核心属性，让子元素靠右对齐，超出部分从左侧裁剪 */
  justify-content: flex-end;
}

热图本身保持你之前设置的固定宽度（比如700px）即可，当容器宽度小于热图宽度时，会自动隐藏左侧的旧日期内容，右侧最新日期始终可见。

方案2：支持横向滚动、默认展示最新日期 #

如果需要用户可以滑动查看完整的热图历史内容，用这个方案：

1. 样式设置：

.heatmap-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.heatmap {
  /* 保持热图固定宽度 */
  width: 700px;
}

2. 添加初始化滚动逻辑，组件加载后自动滚动到最右侧：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.scrollLeft = container.scrollWidth;
    }
  }, []);

  return (
    <div ref={containerRef} className="heatmap-container">
      {/* 你的热图组件 */}
      <div className="heatmap">{/* HeatMap 组件代码 */}</div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Tyler Morales