To let a flex-child have truncated text with ellipsis one can give the parent an min-with:0. In my project the child is nested in almost 10 different flex containers. Do I need to give all parents a min-width:0 or is ther a better work around?
body { width: 400px;}.flex-parent { display: flex; padding: 10px; border: solid;}.flex-parent-parent { display: flex; border: solid; padding: 10px;}.flex-parent-parent-parent { display: flex; border: solid; padding: 10px;}.long-and-truncated { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}<div class="flex-parent-parent-parent"><div class="flex-parent-parent"><div class="flex-parent"><div class="flex-child long-and-truncated"> 1. This is a long string that is OK to truncate please and thank you</div></div></div></div>