将 Flexbox 和文本省略号与中间容器一起使用

Question

我需要在 flexbox 内的 h2 文本中添加文本省略号。 我发现了很多很好的例子，但没有一个适合我的情况，因为中间有中间 div：

<div class="parent-flex">
   <div class="inner-div-1">
      <div class="inner-div-2">
         <h1>My long text is here</h1>
      </div>
   </div>
   <div>... other column...</div>
</div>

css 是：

.parent-flex {
   display: flex;
}

h1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

尝试添加：

min-width: 0;
display: flex;
flex: auto; // tried also 0, 1, 0 1 and lot of other combinations

到链中的每个 DIV，但无法使其工作:(

任何帮助将不胜感激！ 无法正常工作。

Answer 1

找到了解决方案:)

无需在内部 div 中添加任何 css

只是：

.parent-flex {
    flex: auto;
    flex-direction: column;
    padding: 0 20px;
    min-width: 0px;
}

h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}