使 div 在 overflow-y 上可滚动，但同时 overflow-x 应该完全可见

Question

让我首先为我的问题提供stackblitz url，以防我所描述的内容令人困惑。
我正在开发一个反应打字稿项目并根据提供的线框构建 UI。我有一个固定宽度的垂直容器，其中包含一张显示在另一张下方的卡片。当我们将鼠标悬停在其中一张卡片上时，卡片的宽度应该像这样扩展：

这部分的代码是：
index.ts

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      payload: [
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'AB' },
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'CD' },
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'EF' },
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'GH' },
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'IJ' },
        { text: 'sdsdgfdghgf', heading: 'Heading', intitials: 'KL' },
      ],
    };
  }

  render() {
    return (
      <div className="container">
        <div className="container-light">
          {this.state.payload.map((item: any) => (
            <div className="card"></div>
          ))}
        </div>
      </div>
    );
  }
}

styles.css

.container {
  display: flex;
  position: absolute;
  z-index: 1;
}

.container-light {
  background-color: #eaeaea;
  width: 100px;
}

.card {
  height: 60px;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  z-index: 2;
  border: 1px solid #5a5a5a;
  margin: 0px 10px 5px;
  background-color: #eaeaea;
}

.card:hover {
  width: 320px;
  border: 1px solid #1473e6;
}

然后，如果我们降低浏览器窗口的高度，我需要我的外部容器是可伸缩的，同时保持悬停行为。但是一旦我将overflow-y: auto 添加到可滚动容器中，它也会隐藏我的水平溢出数据。看起来像这样：

为了实现滚动，我将overflow-y: auto; 和height: 300px; 添加到.container-light，即我的可滚动div。

我有一种半成形的 CSS 解决方案，我在悬停时制作 div position: fixed; 并修改其兄弟的边距，就像这样：

.card:hover {
  position: fixed;
  top: 100px; /* have to calculate this dynamically somehow */
}
.card:hover + .card {
  margin-top: 66px; 
}

我被困在这里了。如果我弄清楚我的技巧，那么我想我可以暂时保留它。但是，如果我遗漏了一些非常明显的东西，或者如果有人有不同的解决方案，我将不胜感激。

Answer 1

试试这个：

.container {
  min-width:320px
}