Вложенный макет не растягивается до низа в Bootstrap4

Question

Я использую Bootstrap 4.4.1. В данных, которые я хочу отобразить, первый столбец должен быть достаточно широким из-за того, что информация в этом столбце может быть довольно длинной. Из-за этого у меня есть только два столбца из Bootstrap, доступных для последних трех столбцов, поэтому я решил использовать вложенный макет.

Вот данные:

<style>
.my-container {
  font-size: 1rem;
}
.data-row {
  font-size: 0.8rem;
}
.my-col {
  border: solid;
  border-width: 2px 0px 0px 2px;
  background-color: lightgrey;
}
.sub-col {
  background-color: pink;
  text-align: center;
}
.last-col {
  border-width: 0px 2px 0px 0px;
  padding: 0px;
}
.bottom-row {
  border-bottom-width: 2px;
}
</style>
<div class="container-fluid my-container">
  <div class="row">
    <div class="col col-8 my-col">Entry Name</div>
    <div class="col col-2 my-col">Contact(s)</div>
    <div class="col col-2 my-col last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A</div>
          <div class="col col-4 my-col sub-col">B</div>
          <div class="col col-4 my-col sub-col">C</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row data-row">
    <div class="col col-8 my-col">Entry #1</div>
    <div class="col col-2 my-col">u1@example.com</div>
    <div class="col col-2 my-col last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A1</div>
          <div class="col col-4 my-col sub-col">B1</div>
          <div class="col col-4 my-col sub-col">C1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row data-row">
    <div class="col col-8 my-col bottom-row">Entry #2</div>
    <div class="col col-2 my-col bottom-row">u2a@example.com u2b@example.com</div>
    <div class="col col-2 my-col bottom-row last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A2</div>
          <div class="col col-4 my-col sub-col">B2</div>
          <div class="col col-4 my-col sub-col">C2</div>
        </div>
      </div>
    </div>
  </div>

</div>

Вот как это выглядит:

Я хочу, чтобы розовая часть строки Entry #2 растянулась до самого дна. Как я могу это сделать?

Answer 1

Вы можете использовать h-100 свойство Bootstrap, чтобы установить высоту div в 100%. Смотрите ссылку ниже: https://jsfiddle.net/csevimli/tchwbk95/1/

Answer 2

Если вы сделаете container и row во всю высоту, используя h-100, и установите цвет фона на розовый ...

https://codeply.com/p/oTK74DG4YA

<div class="row data-row">
    <div class="col col-8 my-col bottom-row">Entry #2</div>
    <div class="col col-2 my-col bottom-row">u2a@example.com u2b@example.com</div>
    <div class="col col-2 my-col bottom-row last-col">
        <div class="container-fluid pink h-100">
            <div class="row h-100">
                <div class="col col-4 my-col sub-col">A2</div>
                <div class="col col-4 my-col sub-col">B2</div>
                <div class="col col-4 my-col sub-col">C2</div>
            </div>
        </div>
    </div>
</div>