title: Padding on Bootstrap 4 flex container with 100% height
body: <p>I'm making a div that needs to be fixed, 100% height and vertically center aligned. And it has to be done with Bootstrap 4. I've managed all of that, except adding padding. Whenever I add padding to the child div, the content goes offscreen. I've even tried</p>
  
  <pre><code>overflow-y: scroll
  </code></pre>
  
  <p>hoping it'll fix it, but nothing happens.</p>
  
  <p>Because the code snipped is not showing everything as it should on here, here's <a href="https://codepen.io/anon/pen/Rxbwra?editors=1100" rel="nofollow noreferrer">a codepen link</a>.</p>
  
  <p>Can someone please take a look at my code and let me know what I did wrong? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
    color: #fff;
    background: tomato;
    position: fixed;
    min-height: 100%;
    /* height: 100%; */
    width: 340px;
    right: 0;
    top: 0;
    overflow: scroll;
  }
  
  .card-block {
    padding: 100px;
    margin: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /&gt;
  &lt;div class="card rounded-0 d-flex justify-content-center"&gt;
  
    &lt;div class="card-block align-self-center"&gt;
      &lt;h1&gt;This is a title&lt;/h1&gt;
      &lt;h5&gt;This is a subtitle&lt;/h5&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris
        auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor
        libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.&lt;/p&gt;
      &lt;a href="#" class="btn btn-secondary"&gt;This is a button&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>