尽管`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>