Question

我有以下标记和css：

关键部分是：

.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 类定义溢出属性两次。

来到这里：

.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 类属性。< / p>

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

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

您可能希望以其外观的方式进行游戏。我建议将外部divs溢出设置为overflow: auto，内部div会溢出到overflow: visible，就像我在this JSFiddle中所做的那样。

Answer 2

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

和

添加了新课程.fix-position{ top:auto; position:fixed; }

请查看我的JsFiddle

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

如何溢出-y：滚动overflow-x：scroll的子节点

2 个答案: