angle-ui-gridがネストされたUIビュー内で正しくレンダリングされない

Question

タブ付きコンテナを使用してページを作成するために、ui-gridおよびui-viewでAngularJSを使用しています。各タブ（通常はUI-グリッド）のコンテンツは、UIビュー内に表示されている：

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

問題は、UI-グリッドがないということですコンテナを垂直方向に塗りつぶすのではなく、最小の高さに設定します。 「パネル」に関連するすべてのCSSクラスは「高さ：100％」としか指定されていません。高さは他の場所には設定されません。この状況をデバッグしようとすると、ui-viewがサイズが正しく計算されていないグリッドで正しく埋められていることがわかりました。タブ付きコンテナは、他のUIビューにネストされています。誰かがそのような行動を引き起こす可能性があるか、それを修正しようとする可能性があるのか​​？

Answer 1

問題は、コンテンツに適切なスタイルを渡さないことによって発生しました。解決策は、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>