ブートストラップのnav-tabsを使用すると子divがオーバーフローする

Question

私は正しいサイズのdivを持っています。その中にタブと子divを配置したいのですが。内側のdivはスクロール可能です。タブが存在しない場合、これはうまく動作します。

ブートストラップのナビゲーションタブを追加すると、子divが下方向に「プッシュ」され、タブの高さでオーバーフローします。どのように私は親の残りスペースの100％を取るべきである」、このdiv要素の線に沿って何かを定義するのですか？

<div class="fill" id="div-camera-details"> <!--This div is correctly sized, it has max-height set to 100%--> 
    <ul class="nav nav-tabs nav-justified" data-tabs="tabs"> 
     <li class="nav-item" id="overview-tab-button"><a class="nav-link" data-toggle="tab" 
                 href="#overview-tab">Přehled</a></li> 
     <li class="nav-item" id="gallery-tab-button"><a class="nav-link active" data-toggle="tab" 
                 href="#gallery-tab">Galerie</a></li> 
    </ul> 
    <div class="container-fluid fill highlight-border-solid"> 
     <div class="tab-content fill"> 
      <div role="tabpanel" class="tab-pane" id="overview-tab"> 
       <div>Some content</div> 
      </div> 
      <div role="tabpanel" class="tab-pane in active fill" id="gallery-tab"> 
       <div class="container y-scrollable"> 
        <div>Some looong content</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

This is a simple depiction of what I have.あなたがオーバーフローを見ることができます下部に。内容は終了すべき場所を明るいグレーの境界線があります固体境界は、クラスhighlight-border-solidによってと分かるように引き起こされる（デバッグのために）、それがオーバーフローDIVである任意の助け

Answer 1

Iはhackishlyこのような画素の高さを減算することによってそれを解決するための

ありがとう：。

HTMLで

.tab-body { 
    height: calc(100% - 41px); 
} 

：

<div class="fill" id="div-camera-details"> <!--This div is correctly sized, it has max-height set to 100%--> 
    <ul class="nav nav-tabs nav-justified" data-tabs="tabs"> 
     <li class="nav-item" id="overview-tab-button"><a class="nav-link" data-toggle="tab" 
                 href="#overview-tab">Přehled</a></li> 
     <li class="nav-item" id="gallery-tab-button"><a class="nav-link active" data-toggle="tab" 
                 href="#gallery-tab">Galerie</a></li> 
    </ul> 
    <div class="container-fluid tab-content tab-body"> 
      <div role="tabpanel" class="tab-pane" id="overview-tab"> 
       <div>Some content</div> 
      </div> 
      <div role="tabpanel" class="tab-pane in active fill" id="gallery-tab"> 
       <div class="container y-scrollable"> 
        <div>Some looong content</div> 
       </div> 
      </div> 
    </div> 
</div> 

これは私に「クリーン」なようではありませんが、今のところは何をする必要があります。