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

Question

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

Я пытаюсь создать приложение гридстера. Гридстер уместится в экран. Элемент 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 иметь размер только до конца элемента гридстера?

демо здесь

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

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. Это отлично работает с хромом, но в остальном правое изменение размера перекрывает полосу прокрутки. Это очень раздражает и довольно сложно взять прокрутку вместо изменения размера виджета. РЕДАКТИРОВАТЬ: добавление маржи решило проблему.