title: Bootstrap 4 - container with 100% height of section
body: <p>So here I have a problem with Bootstrap 4 (and also flexbox). Here is the code:
  HTML:</p>
  
  <pre><code>&lt;section id="intro"&gt;  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row align-items-center"&gt;
              &lt;div class="col align-self-center"&gt;
                  &lt;h1&gt;We design things&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#intro {
      min-height: 65vh;
      background-image: url("../img/intro.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }
  .container-fluid {
      height: 100%;
      min-height: 100%;
  }
  </code></pre>
  
  <p>I want the .container-fluid to always be 100% of it's parent height, so if section has 100vh, container should also, if it has 50vh it also should have 50vh. How do I do that? I can't center something using flexbox if it's height is the height of h1.</p>