title: Use text-overflow: ellipsis and flexbox align-items: center in combination
body: <p>I've got a <code>div</code>, which is a wrapper, and some child <code>div</code> within. I'm using <code>flexbox</code> to position them below each other. Now, the child divs have a text. The text is aligned vertical with <code>align-items: center;</code>. The width of the child div depends of it's text. When the text is as long as the wrapper, the div should stop growing and the text within should got cut of. For this I tried to use <code>text-overflow: ellipsis;</code>. It doesn't work as expected. I know I could use <code>display: inline-block;</code> in case of <code>flexbox</code>, but I would like to use <code>flexbox</code> to align the text in combination with <code>text-overflow: ellipsis;</code> but it seems not to work with my example. At the moment, the item with long text overlaps the wrapper and there is also no ellipsis. The item has an fix height.</p>
  
  <p>The only answer I found for this topic was this one, but the answer didn't help me: <a href="https://stackoverflow.com/questions/26465745/ellipsis-in-flexbox-container">Ellipsis in flexbox container</a></p>
  
  <p>Hope it's clear enough.</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>.wrapper {
    display: flex;
    flex-direction: column;
    background-color: lightcoral;
    padding: 10px;
    flex-wrap: wrap;
  }
  
  .wrapper__item {
    min-width: 0;
    flex-basis: 50%;
    align-self: flex-start;
    flex-direction: row;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: white;
    height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="wrapper__item"&gt;Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
      tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
      erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.&lt;/div&gt;
  
    &lt;div class="wrapper__item"&gt;Proin eget tortor ri.&lt;/div&gt;
  
    &lt;div class="wrapper__item"&gt;Proin eget tortor ri.Proin eget tortor ri.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>