title: Setting height and d-flex together on a .card-header doesn't work when .card-body content is overflowing
body: <p>I am using <code>bootstrap</code> <code>cards</code> with following styles:</p>
  
  <ol>
  <li><code>height</code> and <code>width</code> of <code>.card</code> are set to be <code>500px</code></li>
  <li><code>.card-header</code> is flexbox to align its content <code>left</code>, <code>right</code> and <code>center</code> as shown in code.</li>
  <li><code>.card-body</code> is overflowing with content so I have set it to be <code>overflow-y: scroll</code></li>
  </ol>
  
  <p><strong>Problem</strong>:</p>
  
  <p>Given above style constraints, if I want to set <code>height</code> of <code>.card-header</code> (example <code>100px</code>), its not working. However this <code>height</code> setting will work fine if I remove flexbox from .<code>card-header</code> </p>
  
  <p>I would like to know why this problem is occuring.</p>
  
  <p><strong>Code:</strong></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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;style&gt;
      .card{
          width: 500px;
          height: 500px;
      }
      .card-header{
          height: 100px;/*remove this and header height will be 100px*/
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .card-body{
          overflow-y: scroll;
      }
      .border-red{
          border: 1px solid red;
      }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;div class="card text-center"&gt;
      &lt;div class="card-header border-red "&gt;
          &lt;div&gt;left&lt;/div&gt;
          &lt;div&gt;center&lt;/div&gt;
          &lt;div&gt;right&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
          &lt;div&gt;overflow&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>