角度网格2 使网格大小与网格项的可滚动内容相匹配

Question

下面是简单的github演示的链接。

我正在尝试创建一个网格应用程序。 网格将适合自己在屏幕中。网格项目将包含一些可滚动的部分(如不可滚动的标题+可滚动的内容(。
理想情况下，我希望可滚动部分包含网格项目的剩余区域。我可以通过设置 css 溢出属性来设法使整个项目可滚动，但不能通过设置部分。

网格配置：

gridsterOptions: GridsterConfig = {
gridType: 'fit',
compactType: 'compactUp',
minCols: 1,
maxCols: 12,
minRows: 1,
maxRows: 12,
outerMarginLeft: 4,
outerMarginRight: 4,
outerMarginTop: 4,
displayGrid: 'always',
defaultItemCols: 1,
defaultItemRows: 1,
minItemCols: 1,
maxItemCols: 12,
minItemRows: 1,
maxItemRows: 12,
itemChangeCallback: (newPosition) => {
console.log('grid item event: ', newPosition);
// todo, save changed gridster layout into user's profile?
},
draggable: {
enabled: true
},
resizable: {
enabled: false
},
pushItems: true,
pushResizeItems: false,
swap: true
};

应用组件：

<gridster [options]="gridsterOptions">
<gridster-item [item]="widget" *ngFor="let widget of dashboard">
<p>
some non scrollable text
</p>
<div style="overflow: scroll;">
<p>
very big content here which should scroll to the end of gridster item
</p>
</div>
</gridster-item>
</gridster>

我的问题是如何使div的尺寸只到网格项目的末尾？

演示在这里

非常感谢您的帮助

Answer 1

这对我有用：

<gridster [options]="gridsterOptions">
<gridster-item [item]="widget" *ngFor="let widget of dashboard">
<div>
some non scrollable text
</div>
<div style="overflow-y: auto; max-height: calc(100% - 40px);">
<p>
very big content here which should scroll to the end of gridster item
</p>
</div>
</gridster-item>
</gridster>

其中 40px 是标题div 的高度。这在镶边上工作正常，但在其余部分，右侧调整器与滚动条重叠。抓住滚动而不是调整小部件的大小非常烦人且非常困难。 编辑：添加边距解决了这个问题。