如何溢出-y：滚动溢出-x的子级：滚动

Question

我有以下标记和 css：

https://jsfiddle.net/f0u9kpkb/

关键部分是：

.grid {
  border: 1px solid #bdbdbd;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: auto;
  height: 200px;
}

.grid .grid-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: auto;
}

我希望我的代码在外部 div 上产生一个水平滚动条，在内部 div 上产生一个垂直滚动条（溢出时），但在示例中我得到 2 个水平滚动条（尽管设置了 overflow-x: 在内滚动条）

有没有办法达到我想要的效果

Answer 1

请查看 w3schools.com 上的 overflow property

我可以看到这里有几个问题。首先是您可能需要在表格中添加更多行以使其更长，以便它实际滚动（它没有在我的显示器上）。

第二个是您为 .grid 类定义了两次 overflow 属性。

曾经在这里：

.grid {
  border: 1px solid #bdbdbd;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: auto;
  height: 200px;
}

但是你有这个类：

.grid .grid-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: auto;
}

这不仅会更改 .grid-body 类的属性，还会更改 .grid 类的属性

我从这个类中删除了溢出属性，并为 .grid-body 类添加了另一种样式，因此它不会覆盖 .grid 类属性。

.grid-body {
  overflow-x: hidden;
  overflow-y: visible;
}

我还在您的表格中添加了更多行。这实现了您要求的内部 div 上的垂直滚动和外部 div 上的水平 div 的行为。 See my JSFiddle.

您可能想玩弄它的外观。我建议将外部 div 溢出设置为 overflow: auto，将内部 div 溢出设置为 overflow: visible，就像我在 this JSFiddle 中所做的那样。

Answer 2

您需要将right:0 CSS 添加到.grid .grid-body 类

和

添加了一个新类.fix-position{ top:auto; position:fixed; }

请查看我的JsFiddle

如果有任何问题，请告诉我。