title: how to make only one flex item strech while other restricted to keep their natural height?
body: <p>I want all of the flex items except last to just occupy their normal height and the last flex-item to occupy remaining height of the flexbox (stretch). But I have not been able to do that.</p>
  
  <p>Following is what I have been trying:</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>  .parent {
          display: flex;
          flex-wrap: wrap;
          /*align-content: start;*/
          border: 1px solid green;
          height: 50vh
      }
  
      .child-height-auto {
          align-self: start;
          border: 1px solid red;
          width: 100%;
      }
  
      .child-height-strech {
          align-self: stretch;
          border: 1px solid blue;
          width: 100%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;div class="child-height-auto"&gt;I should occupy my normal height&lt;/div&gt;
      &lt;div class="child-height-auto"&gt;I should occupy my normal height&lt;/div&gt;
      &lt;div class="child-height-strech"&gt;I should occupy remaining height of the flexbox&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>