如何使弹性容器中的所有孩子都具有相同的高度

Question

我被这个问题困住了。

我正在尝试使 flex 容器中的所有子 div 具有与最高子 div 相同的高度，这里是 100px，我希望它们居中对齐

不知道我该怎么做。我试过 flex:1 不起作用，我也试过做 align:stretch 但似乎不起作用。

有人可以帮忙吗？

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 500px;
  align-items: center;
  height:160px;
}
.container div:not(:first-child) {
  background: green;
  margin-top: 20px;
  margin-left: 20px;

}
.container div:first-child {
  height: 100px;
  background: red;
  margin-top: 20px;
  margin-left: 20px;
  text-align: center;
}

<div class="container">
  <div>
    item-1
  </div>
  <div>
    item-2
  </div>
  <div>
    item-3
  </div>
</div>

Answer 1

为此，您只需将内部 div 包裹在另一个 div 中并在 container 元素上设置 align-items: center。

.container {
  display: flex;
  border: 1px solid black;
  align-items: center;
  width: 500px;
  height: 150px;
}
div > div {
  display: flex;
}
.container div div:not(:first-child) {
  background: green;
  margin-left: 20px;
}
.container div div:first-child {
  height: 100px;
  background: red;
  margin-left: 20px;
  text-align: center;
}

<div class="container">
  <div>
    <div>
      item-1
    </div>
    <div>
      item-2
    </div>
    <div>
      item-3
    </div>
  </div>
</div>