Как обрезать дочерний элемент только до ширины другого дочернего элемента [дубликат] ⇐ Html

[Anonymous]

У меня есть элемент div с двумя дочерними элементами. Я хочу, чтобы второй дочерний элемент был обрезан до ширины первого дочернего элемента. Не следует указывать ширину первого дочернего элемента. Я видел несколько решений, использующих ширину: min-content для родительского элемента, но они, похоже, не работают с text-overflow:ellipsis.
Вот мой код:

Код: Выделить всё

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

Код: Выделить всё

This is a title
This is a long long long long metadata

Подробнее здесь: https://stackoverflow.com/questions/793 ... child-item