PrimeNG p-tree 水平滚动条隐藏，直到我向下滚动到 div 底部

Question

我的问题。我有一个 p-tree 组件，其中包含大量分层对象。当我将它们展开到显示垂直滚动条的位置时，一切都很好。但是，当我展开更多节点以使溢出向右时，水平滚动条被隐藏。只有当我一直向下滚动到树的底部时，我才能看到水平滚动条。我已经尝试过各种 CSS mods 并通过检查使用 ui-tree div，但我找不到任何似乎有效的东西。2 注意：将“溢出：自动”更改为“溢出：可见”只会完全消除垂直滚动条，并且内容会消失在可见页面之外。将溢出更改为滚动会创建一个水平滚动条，但它只是一个空栏，我需要向下滚动才能看到实际的滚动条。这是我的 ui-tree CSS：:host ::ng-deep .ui-tree {  border: 1px solid #adabab;  border-radius: 0px 5px 5px 0px;  background-color: rgba(0, 0, 0, 0.38);  color: #eaeaea;  padding-right: 5px;  width: 22em;  max-height: 75vh;  overflow: auto;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}自 4 月 1 日起，我正在使用最新的 PrimeNG 和 PrimeIcons 以及 Angular 9。不幸的是，由于专有问题，我无法发布我的代码和/或 HTML，但如果没有人有解决方案，我可以创建一个 fiddle/stackblitz/plunkr ，但这需要一些时间，但如果有必要的话我会这样做。简而言之，水平滚动条是隐藏的，直到我一直向下滚动，并且无论垂直滚动条的位置如何，我都需要它可见并正常工作。非常感谢任何帮助或建议！

Answer 1

解决了我自己的问题，尽管感觉有点混乱。将其留在这里，以防其他人遇到此问题或有更优雅的方法来解决它，而无需一堆 :host 和 ::ng-deep 因为它们在将来的某个时候会消失。

我最终不得不为以下内容创建额外的 CSS 规则：

:host ::ng-deep .ui-tree {

  border: 1px solid #adabab;

  border-radius: 0px 5px 5px 0px;

  background-color: rgba(0, 0, 0, 0.38);

  color: #eaeaea;

  padding: 0em 0em;

  padding-right: 5px;

  width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */

  line-height: 15px !important;

  max-height: 75vh;

  overflow: overlay; /* Changed from auto to overlay */

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

/* This creates the horizontal scrollbar visible on top of the inner divs */

:host ::ng-deep .ui-tree .ui-tree-container {

  overflow: initial;

}

/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */

:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {

  margin-right: 10px;

}