title: CSS flex box - how to make items center vertically with a full height background
body: <p>I'm trying to align some text within a box vertically centered, whilst ensuring the background colour stretches full height. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="feature-content"&gt;
  &lt;div class="feature-visual"&gt;
      &lt;div class="embed-container"&gt;
          &lt;iframe src="https://player.vimeo.com/video/214852366?controls=0&amp;amp;hd=1&amp;amp;autohide=1" title="Factory Pattern &amp;amp; REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="quote"&gt;
      &lt;div class="words"&gt;Improved our conversion rates to a level that far surpassed expectation.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>CSS:</p>
  
  <pre><code>article section.case-study .feature-content {
      align-items: stretch;
      align-content: stretch;
      display: flex;
      padding-top: .35em;
  }
  article section.case-study .feature-content .feature-visual {
      flex-grow: 1;
      flex-basis: 65%;
  }
  article section.case-study .feature-content .quote {
      align-self: stretch;
      background: #db6f72;
      color: #FFF;
      flex-basis: 35%;
      flex-grow: 1;
      position: relative;
  }
  article section.case-study .feature-content .quote .words {
      font-family: "Georgia", serif;
      font-size: 2em;
      font-style: italic;
      line-height: 1.5;
      padding-top: 4.5em;
      width: 80%;
  }
  </code></pre>
  
  <p>Current live version here <a href="https://factorypattern.co.uk/case-study/rehau-interactive-touchscreen/" rel="nofollow noreferrer">https://factorypattern.co.uk/case-study/rehau-interactive-touchscreen/</a></p>
  
  <p>Image here of what I want it to look like:
  <a href="https://i.stack.imgur.com/rUCy0.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Any assistance greatly appreciated :)</p>