title: CSS text ellipsis and 100 percent width
body: <p>I have the following container of text:</p>
  
  <pre><code>&lt;div class="cardTitles"&gt;
  
  &lt;div class="title"&gt;
      &lt;div class="titleContent"&gt;
          &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;
          &lt;b&gt;Some long long long title here&lt;/b&gt;
          &lt;a href="some href"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  ... title divs ...
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong>:</p>
  
  <pre><code>.cardTitles {
      width: 100%;
      height: 100%;
  }
  
  .title
  {
      position: relative;
  
      padding-top: 8px;
      padding-bottom: 8px;
  }
  </code></pre>
  
  <p>I want to make text full width + text-overflow: ellipsis. So when I resize browser all <code>title</code> divs should be full 100% width of the parent <code>cardTitles</code> with cut text to three dots at the end.</p>
  
  <p>I found that this is possible using flex. Here is the possible <a href="https://stackoverflow.com/questions/12649904/css-text-ellipsis-when-using-variable-width-divs">answer</a>:</p>
  
  <pre><code>.parent-div {
      display: flex;
  }
  
  .text-div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;    
  
      min-width: 0;
  }
  </code></pre>
  
  <p>But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.</p>
  
  <hr>
  
  <p>You can find an example here: <code>http://88.198.106.150/tips/cpp/</code></p>
  
  <p>Try to resize browser and look at title with text: <code>What does it mean that a reference must refer to an object, not a dereferenced NULL pointer</code>. I need to make it overflow ellipsis.</p>