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

问题描述

我需要在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，但不能使其起作用：（

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

解决方法

找到了解决方案：）

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

正义：

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

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