Bootstrap 4, как выровнять по высоте две панели вкладок?

Question

Поскольку я использую собственные классы Bootstrap 4 для создания двух панелей вкладок с контентом, мне было интересно, существует ли какой-либо конкретный класс, чтобы сделать две панели контента (класс .tab-pane) равными по высоте?

Мой HTML-код:

<div class="d-flex flex-column">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#second">TWO</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane container active show" id="first">        
            // content
        </div>
        <div class="tab-pane container fade" id="second">
            // content
        </div>
    </div>
</div>

, если нет, даже некоторые CSS, чтобы исправить это было бы здорово, я попытался с flex: 1 1 auto на внешнем div и flex: 1 0 100% на двух панелях, но не 'тоже не работает.

Answer 1

Вы можете использовать свойство min-height в классе tab-content.

Для примера, в котором я использовал значения в пикселях, я рекомендую использовать проценты или применять значенияв rem или em, как считаете нужным.

.tab-content {
  background-color: yellow; /*Only for visual example*/
  min-height: 100px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="d-flex flex-column">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#second">TWO</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane container active show" id="first">
      Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks
      at StackPath.
    </div>
    <div class="tab-pane container fade" id="second">
      Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath.
    </div>
  </div>
</div>