尽管有“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>