angular-gridster2 Подгонка размера сетки с прокручиваемым содержимым элементов сетки

Question

Ниже приведена ссылка на простую демонстрационную версию github.

Я пытаюсь создать приложение гридстера.Гридстер уместится в экран.Элемент Gridster будет состоять из некоторой прокручиваемой части (например, не прокручиваемый заголовок + прокручиваемый контент).
В идеале, я хотел бы, чтобы прокручиваемая часть содержала оставшуюся область элемента Gridster.Я могу получить прокручиваемый элемент целиком, установив свойство переполнения 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
  };

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 иметь размер только до конца элемента гридстера?

демо здесь

Большое спасибо за помощь