Make div not expand parent

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>