html - 使div不展开父级

Question

我搜索这个问题已经有一段时间了，但只找到了相反问题的解决方案。

所以这是我的问题:

我有一个侧面板，它的宽度应该与其内容一样宽。该面板的标题可能很长。该 header 不应扩展面板，而应省略。

HTML 看起来与此类似

<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>

这是演示问题的CSS

.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/

在 fiddle 中，蓝色框应与第二个紫色框(+边距)一样宽。绿色框中的文本应被省略。

我该怎么做？

编辑:澄清一下:蓝色框应该适合大小不同的紫色框的内容。固定宽度不能解决问题。

Answer 1

首先，您的容器必须固定max-width 或width。其次，您的overflow 必须是hidden 而不是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>