当父项溢出时触发子项溢出

Question

我在display: flex;父div中有一堆display: inline-block; div。当窗口变得太小时，父div会溢出行，并出现水平滚动条。其中一个inline-block div包含一些长的内容，所以在这种情况下，我希望这个区块崩溃到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> 

在这个例子中，我想与overflowMe类崩和溢出div中outer DIV溢出之前。

纯css答案首选但js也可以接受。

Answer 1

随着.outer容器弯曲，让.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>