css - primeNg表在tabSwitch上有超过5条记录时修改容器宽度

Question

选项卡开关上容器的宽度正在增加。但是当表只有少于 5 条记录时它工作正常。

示例应用程序

Answer 1

实际的滚动条（默认的灰色方形滚动条）为 18 像素宽。PrimeNG 通过在高度和宽度上增加 18px 来扫除它们：

.p-scrollpanel-content {
  height: calc(100% + 18px); 
  width: calc(100% + 18px); /* extra 18px to move scroll out of boundary and hide */
  padding: 0 18px 18px 0;
  position: relative;
  overflow: auto;
  box-sizing: border-box;
}

当内容没有溢出时，浏览器会删除默认滚动条，因此会在内容区域中增加额外的 18px。内容宽 18px。

您需要在 styles.css 或编译的任何地方添加以下 CSS 规则：

.p-scrollpanel .p-scrollpanel-content {
  overflow-y: scroll !important;
}

上面的规则说不管溢出总是显示垂直滚动条。 固定演示