尽管有`flex：1`和`flex-basis：0`，但Flexbox子项并不相等[重复]

Question

我有一个flexbox 和两个孩子。我希望两个孩子的大小相同，尽管一个有填充而另一个没有。

这是一个演示。我希望蓝色和绿色框的大小相等：

html, body, .container {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  min-width: 0;
  flex-basis: 0;
}

.first {
  background: cornflowerblue;
}

.second {
  background: lightgreen;
  padding: 100px;
}

<div class="container">
  <div class="first"> </div>
  <div class="second"> </div>
</div>

我知道我可以使用width: 50%，但这与方向无关，如果我添加更多元素就会中断。

Answer 1

您需要两个 div 都为 50% (flex:1)，然后在第二个具有填充的 div 中放置另一个 div。这样，父母双方的宽度相同，而第二父母的宽度相同。

html, body, .container {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container > div {
  flex: 1;
}

.first {
  background: cornflowerblue;
}

.second {
  background: lightgreen;
}

.second > div {
  padding: 100px;
}

<div class="container">
  <div class="first">first</div>
  <div class="second">
      <div>second</div>
   </div>
</div>