Flexbox:子用户如何拥有其内容的宽度，而子2如何填充其余的宽度？

Question

我有一种情况，我想让孩子们并肩作战。我希望子对象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 auto)，而flex-2应该能够增长、收缩和自动宽度(flex: 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>

​