Trigger overflow on child when parent overflows

Question

I have a bunch of display: inline-block; divs inside of a display: flex; parent div. When the window becomes too small, the parent div overflows the row and a horizontal scroll bar appears. One of the inline-block divs contains some long content, so in this case I would like this block to collapse to overflow: ellipsis. However, this block never technically overflows since it is the parent overflowing. How can I solve this?

Here is the code:

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

In this example, I would like the div with class overflowMe to collapse and overflow before the outer div overflows.

Pure css answers preferred but js is also acceptable.

Answer 1

With the .outer container flex, let the .inner overflow-x: hidden, text-overflow: ellipsis and 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>