I have a correctly-sized div, inside of which I want to place tabs and some child divs. The inner divs will be scrollable. This works fine when the tabs are not present.

When I add Bootstrap nav-tabs, they "push" the child div downwards and it overflows by the height of the tabs. How do I define something along the lines of "this div should take 100% of parent's *remaining* space?

```
<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.](https://i.stack.imgur.com/P5Goc.png) On the bottom you can see the overflow. The light gray border is where the content should end. The solid border is (for debugging) caused by class `highlight-border-solid` and as can be seen, that div overflows.

Thanks for any help