Ag-Grid имеет нулевую высоту в макете flexbox

Question

Моя цель - использовать ag-grid в проекте Angular 5, чтобы сетка занимала все доступное вертикальное пространство в макете flexbox. Сетка, кажется, рада использовать "height: 100%", когда она содержится в div, который имеет определенную высоту пикселя, или когда div имеет процентную высоту, но не в макете flexbox. Но всегда кажется, что у него нет высоты, когда я пытаюсь разместить его в гибком элементе.

Как я могу заставить мою сетку расширяться, чтобы поднять высоту ее контейнера гибкого элемента? Вот плункер с примером того, что я вижу и пытаюсь: https://embed.plnkr.co/D8YgM6/.

Вот как я создаю свой макет:

<div style="height:100%;display:flex;flex-direction:column;">
  <div style="height:250px;flex-grow:0;">
    <h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
    <ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
                     [columnDefs]="columnDefs"
                     [rowData]="rowData"
    >
    </ag-grid-angular>
  </div>
  <div style="flex-grow:1;">
    <h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
    <p>How can I get the grid to be aware of my div's actual height?</p>
    <ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
                       [columnDefs]="columnDefs"
                       [rowData]="rowData"
    >
    </ag-grid-angular>       
  </div>
</div>

Я хочу, чтобы сетка во втором элементе flex имела соответствующую высоту. Как я могу это сделать?

Answer 1

В вашем плункере установите для flex-base элемента, содержащего вашу сетку, значение 0, это, я думаю, то, что вам нужно. Я только что боролся с тем же:

  .item-1 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }

Скриншот Plunker в Chrome

Я не уверен, почему это работает, может быть, кто-то с более глубоким знанием ag-grid может прокомментировать?