угловая-ui-сетка не отображается правильно внутри вложенных ui-представлений

Question

Я использую AngularJS с ui-сеткой и ui-view в попытке создать страницу с контейнером с вкладками. Содержимое каждой вкладки (как правило, пользовательский интерфейс сетки), что отображается в пользовательском интерфейсе ракурса:

<div class="tabbed-container"> 
    <uib-tabset> 
     <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active"> 
      <uib-tab-heading> 
       <i class="glyphicon glyphicon-{{t.icon}}"></i> 
       {{t.heading}} 
      </uib-tab-heading> 
     </uib-tab> 
    </uib-tabset> 
    <div ui-view></div> 
</div> 

Содержание может выглядеть следующим образом:

<div class="panel"> 
    <div ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-selection ui-grid-tree-view ui-grid-resize-columns class="grid"></div> 
</div> 

Проблема в том, что пользовательский интерфейс сетки делает не вертикально заполнять контейнер - он установлен на минимальную высоту. Все классы css, связанные с «панелью», определяют только «height: 100%», высота не устанавливается нигде. Попытка отладить эту ситуацию заставила меня понять, что ui-view правильно заполнен сеткой, размер которой неверно рассчитан. Контейнер с вкладками вложен в другой ui-view. Кто-нибудь знает, что может вызвать такое поведение или что я могу исправить?

Answer 1

Проблема была вызвана тем, что не соответствовал стилю содержимого для ui-view. Решение состояло в том, чтобы использовать flex, установить «flex: 1» на контейнер и передать его в ui-view.

.tabbed-container 
{ 
    flex: 1; 
    display: flex; 
    flex-flow: column; 

    /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */ 
    min-height: 100px; 
    min-width: 100px; 

    .tab-content 
    {  
     flex:1; 

    /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */ 
     min-height: 100px; 
     min-width: 100px; 
    } 
} 

HTML:

<div class="tabbed-container"> 
    <uib-tabset> 
     <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active"> 
      <uib-tab-heading> 
       <i class="glyphicon glyphicon-{{t.icon}}"></i> 
       {{t.heading}} 
      </uib-tab-heading> 
     </uib-tab> 
    </uib-tabset> 
<div class="tab-content" ui-view></div>