Equal but dynamically-sized columns with overflow ellipsis

Question

I start with a four-equal-column div, which allows single lines that ellipsis when they are too long. I have two ways to do this, the first using a table layout:

div.outer {
  display: table;
  table-layout: fixed;
  width: 100%;
}
div.outer > div {
  width: 25%;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

And secondly using flexbox:

div.outer {
  display: flex;
}
div.outer > div {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

In the table instance, this works fine for when the outer div is specified a width. But whenever the width is removed the equal column sizing fails and - arguably worse - overflow is not trimmed with an ellipsis.

In the flexbox option, it defaults to full width anyway. Changing to display: inline-flex makes the table narrower, but then unneccessarily cuts off text with an ellipsis.

How do I begin the table at a small size (to fit content), expanding in an equal fashion as content increases, and then ellipsis any overflow text when the outer div reaches 100% width? (Note that this width is not a fixed value.)

Other answers here explain that setting various values like the above will ellipsis correctly, but don't answer the question of how to initially start at a smaller table size if possible.

Answer 1

CSS grid will probably do a better job here:

div.outer {
  display: inline-grid; /* fit content */
  grid-auto-flow:column;
  grid-auto-columns:1fr; /* equal column */
  max-width:100%; /* don't go beyond full width */
  margin:10px;
}
div.outer > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>


<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>