How to truncate the text between the children of a flexbox child? - html

Question

I understand how to truncate the text which is wrapped inside a flex child however this particular case seems a bit complicated.
The desired behaviour is that the text between the two blue blocks should get truncated to keep them inside the red border.
.container {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid black;
padding: 10px;
width: 300px;
}
.block {
display: inline-block;
width: 50px;
height: 50px;
}
.container .left {
min-width: 0;
white-space: nowrap;
padding: 10px;
border: 1px solid red;
}
.left .label {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left .block {
background-color: blue;
}
.container .right {
padding: 10px;
border: 1px solid blue;
}
.right .block {
background-color: red;
}
<div class="container">
<div class="left">
<div class="block">
</div>
<div class="label">
Is this the real life?
</div>
<div class="block">
</div>
</div>
<div class="right">
<div class="block">
</div>
</div>
</div>

Answer 1

Is this what you are looking for? Basically i added flexbox property for left and right div
.container {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid black;
padding: 10px;
width: 300px;
}
.block {
display: inline-block;
width: 50px;
height: 50px;
}
.left {
display: flex;
justify-content: space-between;
align-items: flex-end;
min-width: 0;
white-space: nowrap;
padding: 10px;
border: 1px solid red;
}
.label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.block {
background-color: blue;
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid blue;
}
.right .block {
background-color: red;
}
<div class="container">
<div class="left">
<div class="block">
</div>
<div class="label">
Is this the real life?
</div>
<div class="block">
</div>
</div>
<div class="right">
<div class="block">
</div>
</div>
</div>