Flexbox：子级1如何具有其内容的宽度，子级2如何填充其余宽度

Question

我有一种情况，我想让flexbox的孩子们并排在一起。 我希望孩子1的宽度等于其内容的宽度，然后让孩子2占用父对象的剩余宽度。

尽管如此，我似乎还是无法完成这项工作

这是我到目前为止所拥有的

.flex {
  display: flex;
}

.flex-child {
  flex-basis: 0;
  flex-grow: 1;
}

.flex-1 {
  flex-basis: content;
  background: red;
}

.flex-2 {
  background: green;
}

<div class="flex">
  <div class="flex-child flex-1">
    Child 1, Child 1, Child 1
   </div>
   <div class="flex-child flex-2">
    Child 2, Child 2, Child 2
   <div>
</div>

Answer 1

只需将flex-grow设置为第二个孩子

.flex {
  display: flex;
}

.flex-1 {
  background: red;
}

.flex-2 {
  flex-grow: 1;
  background: green;
}

<div class="flex">
  <div class="flex-child flex-1">
    Child 1, Child 1, Child 1
   </div>
   <div class="flex-child flex-2">
    Child 2, Child 2, Child 2
   <div>
</div>

Answer 2

设置每个子项的柔韧性。 Flex-1不应该增长，而应该是自动宽度（flex：0 1自动），而flex-2应该能够增长，缩小和是自动宽度（flex：1 1 auto）

.flex {
  display: flex;
}

.flex-child {}

.flex-1 {
  flex: 0 1 auto;
  background: red;
}

.flex-2 {
  flex: 1 1 auto;
  background: green;
}

<div class="flex">
  <div class="flex-child flex-1">
    Child 1, Child 1, Child 1
  </div>
  <div class="flex-child flex-2">
    Child 2, Child 2, Child 2
    <div>
    </div>