Flexbox in flexbox not working with ellipsis text overflow - html

Question

In my testing (and as answered by my other SO questions), flexbox works well with overflowing text when it's consuming the full width of the page or having a fixed width parent element.
However, if a flexbox with dynamic width is within another dynamic width flexbox, it doesn't support overflow: hidden (and thus text-overflow) correctly and always uses the maximum width of its contents. Is there a way to fix this without setting a specific width on the parent element? Here's a full example:
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
/*width: calc(100% - 220px)*/
}
.toolbar {
display: flex;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
Here's a codepen with the above code to play around with the HTML/CSS:
https://codepen.io/anon/pen/xyNoeq

Answer 1

use display:inline-grid instead of display:flex to class .toolbar as shown below:
.toolbar {
display: inline-grid;
}
Here's the updated snippet:
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
/*width: calc(100% - 220px)*/
}
.toolbar {
display: inline-grid;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>

Answer 2

Make the calculation of the width of your .main element more specific. Only when it is inside the .container element. I just added a few lines of CSS.
body {
font-family: sans-serif;
font-size: 20px;
}
.container {
display: flex;
height: 500px;
max-width: 100%;
margin-top: 2em;
}
.aside {
flex: 0 0 220px;
background: black;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
/* Added */
.container .main {
width: calc(100% - 220px);
}
.toolbar {
display: flex;
background: #eeeeee;
height: 60px;
align-items: center;
padding: 0 10px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works -->
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<!-- Doesn't work without setting width of .main -->
<div class="container">
<div class="aside">
</div>
<div class="main">
<div class="toolbar">
<div class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>