Как указал @Viktor, white-space:nowrap вызывал вашу проблему.
Кроме этого, я бы предложил упростить ваш макет.В IMO нет необходимости в таком количестве контейнеров, или, по крайней мере, вы можете достичь того же результата с помощью небольшого количества кода.
Более того, простота выполнения приводит к простым решениям.Например, нет необходимости делать ничего особенного, чтобы синий прямоугольник занимал все вертикальное пространство из-за значения по умолчанию align-items, равного stretch, означающего, что дочерние элементы будут занимать все доступное пространство в cross-axis (Y вэтот случай).То же самое происходит с дочерними элементами flex-direction:column родителей, которые занимают все горизонтальное пространство.
Пожалуйста, смотрите код, приведенный ниже (префиксы поставщиков опущены для краткости):
.container{
display:flex;
flex-direction:column;
box-sizing:border-box;
padding:1.5rem;
max-width:400px;
background:red;
}
.message:not(:last-child){
margin-bottom:20px;
}
.message{
display:flex;
flex-direction:column;
}
.header{
background:green;
}
.body{
display:flex;
flex-direction:row;
}
.type{
flex-basis:20%;
background:blue;
}
.subtitle{
flex-grow:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background:lightgray;
}
<div class="container">
<div class="message">
<div class="header">
Header
</div>
<div class="body">
<div class="type"></div>
<div class="subtitle">
Test string Test string Test string Test string Test string Test string Test string Test string Blah blah
</div>
</div>
</div>
<div class="message">
<div class="header">
Header 2
</div>
<div class="body">
<div class="type"></div>
<div class="subtitle">
Test string2 Test string2 Test string2 Test string2 Test string Test string Test string Test string Blah blah
</div>
</div>
</div>
</div>
Я создал этот макет, используя этот инструмент , хорошую отправную точку для игры, понимания и генерации flexbox макетов.