CSS Flexbox : 3 flex items, 2 列(宽度等于内容)和 1 个增长到宽度的元素

Question

我有 3 个 flex 元素。 2 应根据其内容调整大小并并排显示。另一个 flex 元素应该增长以适应这个宽度(但不能超过。)

我想要的:

它目前的样子:

我已经接近了，但仍然显示一些灰色背景(似乎没有考虑文字)。 https://codepen.io/albrechtnate/pen/abbYeYL

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

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

我确实使用 CSS Grid ( https://codepen.io/albrechtnate/pen/zYYWgEZ ) 让它工作，但 Grid 对于这样的东西感觉有点矫枉过正。如果我添加第 4 个元素，我不想更改网格模板列。

Answer 1

我认为其他答案遗漏了您希望第一个元素与其他两个组合的宽度相匹配的要点，而不是拉伸(stretch)元素 2 和 3 以适应 100%。

是否可以将元素 2 和 3 放在单独的容器中？

.container {
  display: flex;
  width: fit-content;
  flex-flow: column wrap;
}

.container > div:first-child {
  background-color: red;
  /*width: 100%;*/
}
.container > div:nth-child(2) {
  display: flex;
  flex-flow: row wrap;
}
.container > div:nth-child(2) > div:first-child {
  background-color: blue;
}
.container > div:nth-child(2) > div:last-child {
  background-color: green;
}

/* Un-related Styles */

.setup {
  background-color: #ccc;
}
.setup div {
  height: 100px;
}

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