Filling height with flexbox and bootstrap cards

Question

I have a page using Bootstrap containers and cards. I am trying to get .card-body to fill the full height of the screen but the height ends after the end of the content. Here is a fiddle demonstrating the problem. Fiddle

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  -webkit-box-flex: 1;
  flex-grow: 1;
}

.container {
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  background: #ccc;
}

<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          This should be full height!
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

All containers under .main-content have no heights defined. So why would .card-body be full height? (Note that in HTML/CSS, most elements are height: auto by default.)

You could either add heights to the nested containers, or add display: flex, which will give the children full height through the align-items: stretch default.

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  flex-grow: 1;
  display: flex;   /* new */
}

.container {
  flex: 1;         /* new; for width; */
  display: flex;   /* new */

}

.card {
  flex: 1;         /* new */
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1 1 auto;
  background: #ccc;
}

body {
  margin: 0;
}

<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          <b>This is now full height!</b>
        </div>
      </div>
    </div>
  </div>
</div>