title: Prevent a child element from overflowing its parent in flexbox
body: <p>I'm working on a web app that shows a large grid of cards, the height of which is inherently variable.</p>
  
  <p>In the interests of aesthetics, we were using jQuery's <code>.matchHeight()</code> to equalise the height of cards within each row.</p>
  
  <p>The performance of that didn't scale well, so today I've been migrating to a flex-box based solution which is so much faster.</p>
  
  <p>However, I've lost a behaviour - the content of the card header should be truncated with an ellipsis if it won't fit.</p>
  
  <p>Goals:</p>
  
  <ol>
  <li>3 columns</li>
  <li>Column widths vary to fill parent</li>
  <li>Constant spacing between columns</li>
  <li>Heights equalised within a row</li>
  </ol>
  
  <p>How do I arrange for the container size to be respected and the <code>text-overflow: ellipsis;</code> and <code>white-space: nowrap;</code> to be honoured?</p>
  
  <p>(No jQuery tag as we're moving away from that)</p>
  
  <p>My solution in it's current form, which achieves all of my goals apart from the truncation:</p>
  
  <p><a href="https://codepen.io/anon/pen/QvqZYY" rel="noreferrer">https://codepen.io/anon/pen/QvqZYY</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container { 
                  display: flex; 
                  flex-direction: row; 
                  flex-wrap: wrap; 
                  
                  justify-content: flex-start;    /* Bias cards to stack from left edge       */ 
                  align-items: stretch;           /* Within a row, all cards the same height  */ 
                  
                  border: thin solid gray; 
              } 
              .card-wrapper { 
                  width: 33.33%; 
                  display: flex; 
                  background: #e0e0ff; 
              } 
              .card { 
                  flex-grow: 1; 
                  margin: 7px; 
                  display: flex; 
                  flex-direction: column; 
                  border: thin solid gray; 
                  background: #e0ffff; 
              } 
              .card div { 
                  border: thin solid gray; 
              } 
              .card div:nth-child(1) { 
                  white-space: nowrap; 
                  text-overflow: ellipsis; 
              } 
              .card div:nth-child(2) { 
                  flex-grow: 2; 
              } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt; 
              &lt;div class="card-wrapper"&gt; 
                  &lt;div class="card"&gt; 
                      &lt;div&gt;Title&lt;/div&gt; 
                      &lt;div&gt;Multiline&lt;br/&gt;Body&lt;/div&gt; 
                      &lt;div&gt;Footer&lt;/div&gt; 
                  &lt;/div&gt; 
              &lt;/div&gt; 
              &lt;div class="card-wrapper"&gt;&lt;div class="card"&gt;&lt;div&gt;Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide&lt;/div&gt;&lt;div&gt;Body&lt;/div&gt;&lt;div&gt;Footer&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div class="card-wrapper"&gt;&lt;div class="card"&gt;&lt;div&gt;Title&lt;/div&gt;&lt;div&gt;Body&lt;/div&gt;&lt;div&gt;Footer&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div class="card-wrapper"&gt;&lt;div class="card"&gt;&lt;div&gt;Title&lt;/div&gt;&lt;div&gt;Body&lt;/div&gt;&lt;div&gt;Footer&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div class="card-wrapper"&gt;&lt;div class="card"&gt;&lt;div&gt;Title&lt;/div&gt;&lt;div&gt;Body&lt;/div&gt;&lt;div&gt;Footer&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
          &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>