Prevent parent overflow in flexbox

Question

I am working on a web application that shows a large grid of maps, the height of which is essentially variable.

In the interest of aesthetics, we used jQuery .matchHeight() to align the height of the cards in each row.

The performance of this did not scale very well, so today I switched to a flexible solution, which is much faster.

However, I lost the behavior - the contents of the map header should be truncated with ellipsis, if it does not fit.

Goal:

• 3 columns
• Column widths vary to fill parent
• Constant spacing between columns
• Heights aligned in a row

How can I arrange the size of the container and observe text-overflow: ellipsis; and white-space: nowrap; ?

(There is no jQuery tag as we move away from it)

My solution is in this current form, which achieves all my goals except truncation:

https://codepen.io/anon/pen/QvqZYY

 #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; } 

 <div id="container"> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Multiline<br/>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"><div class="card"><div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div><div>Body</div><div>Footer</div></div></div> <div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div> <div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div> <div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div> </div> 

Answer 1

The initial setting for flex items is min-width: auto . This means that the default flex element cannot be smaller than the size of its contents.

Therefore, text-overflow: ellipsis cannot work, because the flex element will just expand, not allow overflow. (For the same reason, scrollbars will also not be displayed.)

To undo this behavior, use min-width: 0 or overflow: hidden . More details.

 #container { display: flex; flex-wrap: wrap; 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; overflow: hidden; /* NEW */ } .card div { border: thin solid gray; } .card div:nth-child(1) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; /* NEW */ } .card div:nth-child(2) { flex-grow: 2; } 

 <div id="container"> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Multiline<br/>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div> </div>