title: Flex box aligment, try to combine 'stretch' on parent and 'center' on one child
body: <p>I have the code below and the following issues:</p>
  
  <ol>
  <li><p>I need that all the children of <code>.lt</code> to get the biggest height.(see red border on firs <code>.lt</code>}. for that I use <code>align-items: stretch</code>;</p></li>
  <li><p>I need the content of the element <code>.left</code> to be v/h center. So I use <code>align-self:center;</code> but this cancel the stretch. (the red border is reduced)</p></li>
  <li><p>I need the <code>.right</code> elements to be aligned left and top.</p></li>
  </ol>
  
  <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>.container { 
  display: flex;
  flex-direction:column;
  }
  
  .lt{
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
  }
  
  .left { 
  border-right: 1px solid red;
  flex: 0 0 90px;
  padding: 8px;
  align-self:center;
  justify-content: center;
  }
  
  .right { 
  justify-self: flex-start;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="lt"&gt;
      &lt;div class="left"&gt;
        &lt;a href=""&gt;
          &lt;img src="https://via.placeholder.com/75"/&gt;
          abcd
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
  dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
         the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    &lt;/div&gt;
  &lt;/div&gt;  
  
  
  
      &lt;div class="lt"&gt;
        &lt;div class="left"&gt;
          &lt;a href=""&gt;
            &lt;img src="https://via.placeholder.com/75"/&gt;
            abcd
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt;
          dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>