angular-gridster2适合网格大小和网格项目的可滚动内容

Question

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

我正在尝试创建一个网格应用程序。Gridster将适合自己的屏幕。Gridster项目将由一些可滚动的部分组成(如不可滚动的标题+可滚动的内容)。

理想情况下，我希望滚动部分包含网格项目的剩余区域。我可以通过设置css overflow属性来使整个项目可滚动，但不能设置部分。

gridster配置：

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
  };

AppComponent：

<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的大小只到网格项目的末尾？

demo here

非常感谢你的帮助

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的高度。这在chrome上工作得很好，但在其余的地方，右侧的大小调整与滚动条重叠。抓取滚动而不是调整小部件的大小是非常烦人的，也是相当困难的。编辑:添加边距解决了问题。