nav-pills inside a card-block doesn't maintain the card-height.

Created by: JochemKuijpers

(bootstrap v4)

When placing a nav-pills list of links inside a card-block, the card doesn't maintain the required height.

This problem does not occur with any of the other lists so I think it's unintended behaviour.

Example of nav-pills

Example of nav-tabs

Example of base nav

As you can see, only nav-pills has unintended behaviour. In case anything happens to the hosted code examples, here's a screenshot and the core part of the code to re-create this issue.

<div class="card">
    <div class="card-block">
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">navlink 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">navlink 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">navlink 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">navlink 4</a>
            </li>
        </ul>
    </div>
</div>