角度材质:滚动条位置错误

Question

在我基于angular+material的项目中，我刚刚成功地将垂直滚动条定位在工具栏下方(在sidenav的帮助下(。

但它并不是像预期的那样适用于所有情况。看见https://stackblitz.com/edit/angular-ivy-pst9kr

• 主页：没有滚动条：好
• 第2页：文本很长，右边有一个滚动条：很好
• 第1页：居中的图像带有奇怪的滚动条：糟糕

Page1有一个带firefox的水平滚动条！？！我希望在右边有一个垂直滚动条，而没有水平滚动条。我需要将图像、表格和文本居中。

我试着用"；宽度"；水平滚动条，但没有成功。

编辑：正确的在我的项目中，它没有像预期的那样工作，所以我非常困惑，直到我重写并做了一些清理。

1. 我用2个div包围了每一页：

<div class="page-container">
<div class="page-content">
...
</div></div>

2. 我替换了"；stdpage"；与：

.page-container {
position: fixed;
top: 64px;
overflow: auto;
height: calc(100vh - 64px);
width: 100%;
}
.page-content {
padding-right:  3rem;
padding-left:   3rem;
padding-bottom: 1rem;
}

Answer 1

通过在stdpage类中提供width: 100%，可以正常工作。添加宽度后，页面1将正确获得垂直滚动条。

.stdpage {
position: fixed;
top: 64px;
width: 100%;
overflow: auto;
height: calc(100vh - 64px);
}