Bootstrap 4列的多个子div填充高度100%

Question

在下面的示例中，是否有一种引导方法可以使 id 为“second”的 div 适合其父容器，并且在给定h-100类时不会溢出？我使用的一种 hacky 方法是应用于divoverflow:hidden的父容器#second，它可以满足我的特定情况，但是在这种情况下这会被称为优雅的解决方案吗？

<div class="container">
    <div class="row">
        <div class="col-6 bg-dark">
            <div id="first">
                <h5 class="text-white">some title</h5>
            </div>
            <div id="second" class="h-100 bg-success">

            </div>
        </div>
        <div class="col-6 bg-danger">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/540x400"></a>
        </div>
    </div>
</div>

https://www.codeply.com/go/pSVIlOETpB

Answer 1

当然，只需通过使用类来制作包含的col-6display:flex, flex-direction:column ......d-flex flex-column

https://www.codeply.com/go/5YiBkLo0qO

<div class="container">
    <div class="row">
        <div class="col-6 bg-dark d-flex flex-column">
            <div id="first">
                <h5 class="text-white">some title</h5>
            </div>
            <div id="second" class="h-100 bg-success">

            </div>
        </div>
        <div class="col-6 bg-danger">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/540x400"></a>
        </div>
    </div>
</div>