Make div not expand parent - html

Question

I searched for this problem for quite a while now, but only found solutions to the opposite problem.
So here is my problem:
I have a side panel that should be only as wide as its content. This panel has a header with a potentially long title. That header should not expand the panel, but instead be ellipsed.
The HTML looks similar to this
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>
This is the CSS to demonstrate the problem
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
overflow: none;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
https://jsfiddle.net/1yn725hy/9/
In the fiddle the blue box should be as wide as the second purple box (+margin). The text in the green box should be ellipsed.
How do I do this?
EDIT: Just to clarify: The blue box should fit the content of the purple box which has a varying size. A fixed width does not solve the problem.

Answer 1

First of all your container has to have max-width or width fixed. Second of all your overflow has to be hidden instead of none:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
max-width:200px;
overflow: hidden;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>

Answer 2

Ok, finally solved it myself. The trick is to use the almighty flexbox and wrap the header in it:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
display: flex;
}
.header2 {
width: 0px;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
<div class="header2">
superlongtextthatshouldbeellipsed
</div>
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>

Answer 3

You should add some width to your div. Otherwise the header text wont ellipsed, because there is no "end".
https://jsfiddle.net/1yn725hy/14/