I have 3 flex items. 2 should be sized to their content and display side-by-side. The other flex item should grow to fit this width (but no more.)

**What I want:**

[![What I Want](https://i.stack.imgur.com/b06X3.png)](https://i.stack.imgur.com/b06X3.png)

**What it Currently Looks Like:**

[![What it currently looks like](https://i.stack.imgur.com/sqa7k.png)](https://i.stack.imgur.com/sqa7k.png)

I was able to get close, but there is still some of the gray background showing (doesn’t seem to take the text into account).
<https://codepen.io/albrechtnate/pen/abbYeYL>

```css
.container {
  display: flex;
  width: fit-content;
  flex-flow: row wrap;
}

.container div:first-child {
  width: 100%;
}

/* Un-related Styles */

.setup {
  background-color: #ccc;
}
.setup div {
  height: 100px;
  background-color: blue;
}
.setup div:first-child {
  background-color: red;
}
.setup div:last-child {
  background-color: green;
}
```

```html
<div class="container setup">
  <div>Item</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>
```

I did get it to work using CSS Grid (<https://codepen.io/albrechtnate/pen/zYYWgEZ>) but Grid feels like overkill for something like this. If I add a 4th item I don’t want to have to change the grid-template-columns.