I have a div with two child items. I want the second child item to get truncated till the width of the first child item. The width of the first child item shouldn't be specified. I saw a few solutions using width: min-content on the parent, but they don't seem to work with text-overflow:ellipsis.
Here's my code:
html { padding: 30px; box-sizing: border-box;}.wrapper { display: inline-flex; flex-direction: column; align-items: flex-start; border: 2px solid red; padding: 5px;}.title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%;}.metadata { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}<div class="wrapper"><span class="title">This is a title</span><div class="metadata">This is a long long long long metadata</div></div>