CSS Flexbox：3个弹性项目，2个列（宽度等于内容）和1个增长到宽度的项目

Question

我有 3 个弹性项目。 2 应根据其内容调整大小并并排显示。另一个弹性项目应该增长到适合这个宽度（但不会更多。）

我想要什么：

目前的样子：

我能够靠近，但仍有一些灰色背景显示（似乎没有考虑文字）。 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

我认为其他答案缺少您希望第一个项目与其他两个组合的宽度相匹配的点，而不是拉伸项目 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>

Answer 2

要立即解决您的问题，您可以将此规则添加到您的 CSS 中

.container div {
  width: 50%
}

但我不认为使用网格是“矫枉过正”。 Grid 在创建这种布局（行和列的组合）方面确实很出色，而 flexbox 则在挣扎，正如您自己所经历的那样。 Grid 不是 flexbox 的“进化”版本，它们都有不同的用途。

CSS Grid Layout 和 CSS Flexbox Layout 的基本区别在于 flexbox 是为一维布局而设计的——行或列。 Grid 是为二维布局而设计的 - 行和列。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

Answer 3

不需要 flexbox，一个简单的 inline-block 配置就可以完成这项工作。

.container {
  display: inline-block;
  font-size:0;
}
.container div {
  display:inline-block;
  font-size:initial;
}
.container div:first-child {
  display:block;
  width:0;
  min-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>

<div class="container setup">
  <div>a very long long text in this Item</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>

Answer 4

我最终只是在除了第一个项目之外的所有项目周围添加了一个容器，并使用 flex 使它们根据需要增长。

好处：

1. 第一个项目可以任意长，其他项目将增长以匹配它的宽度。
2. 可以有无限数量的弹性项目，第一个项目将增长以匹配它们的组合宽度。

如果有人确实找到了一种无需添加额外标记即可保留这些好处的方法，请告诉我们！

https://codepen.io/albrechtnate/pen/YzzLzLV

.container {
  background-color: #ccc;
  width: fit-content;
}

.container > div:first-child {
  background-color: blue;
}

.container .group {
  background-color: teal;
  display: flex;
}

.container .group div {
  background-color: red;
  flex: 1 0 auto;
}

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

<br>

<div class="container">
  <div>Item</div>
  <div class="group">
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
  </div>
</div>

<br>

<div class="container">
  <div>Item - This one is super duper extra looper long.</div>
  <div class="group">
    <div>Item Two</div>
    <div>Item Three</div>
  </div>
</div>