Using Flexbox and text ellipsis together with intermediate container

Question

I need to add text ellipsis in a h2 text inside flexbox. I found a lot of great example out there, but none of them fit my case where there are intermediate divs in between:

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

and the css is:

.parent-flex {
   display: flex;
}

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

Tried adding:

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

to every DIV in the chain but just can't make it work :(

Any help would be appreciated! Can't make it to work.

Answer 1

Found the solution :)

no need to add any css to the inner divs

just:

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

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