Flexbox: как дочерний элемент может иметь ширину содержимого, а дочерний 2 заполняет оставшуюся ширину

Question

У меня есть ситуация, когда я хочу, чтобы дети с flexbox были рядом. Я хочу, чтобы дочерний элемент имел ширину, равную ширине его содержимого, а затем дочерний элемент 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-1 не должен расти, но должен иметь автоматическую ширину (flex: 0 1 auto), а 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>

Answer 2

Просто установите 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>