Триггерное переполнение для дочернего элемента при переполнении родительского элемента

Question

У меня есть группа display: inline-block; divs внутри родительского div display: flex;. Когда окно становится слишком маленьким, родительский div переполняет строку и появляется горизонтальная полоса прокрутки. Один из разделов inline-block содержит некоторое длинное содержимое, поэтому в этом случае я хотел бы, чтобы этот блок обрушился на overflow: ellipsis. Однако этот блок никогда не переполняется технически, поскольку он переполняется родителями. Как я могу это решить?

Вот код:

.outer { 
    display: flex; 
    flex-direction: row; 
} 

.inner { 
    display: inline-block; 
    flex: auto; 
} 

.overflowMe { 
    text-overflow: ellipsis; 
} 

<div class="outer"> 
    <div class="inner">Content</div> 
    <div class="inner">Content</div> 
    <div class="inner overflowMe">Content</div> 
    <div class="inner">Content</div> 
</div> 

В этом примере я хотел бы DIV с классом overflowMe коллапса и переполнения перед outer Див перетоков.

Pure css отвечает предпочтительнее, но js также является приемлемым.

Answer 1

С контейнера прогибается Космического, пусть .inneroverflow-x: hidden, text-overflow: ellipsis и white-space: nowrap;

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
.outer { 
 
    display: flex; 
 
} 
 

 
.inner { 
 
    background: gold; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
} 
 

 
.overflowMe { 
 
    overflow-x: hidden; 
 
    text-overflow: ellipsis; 
 
    background: skyblue; 
 
    white-space: nowrap; 
 
}

<div class="outer"> 
 
    <div class="inner">Content</div> 
 
    <div class="inner">Content</div> 
 
    <div class="inner overflowMe">Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content Long Content</div> 
 
    <div class="inner">Content</div> 
 
</div>