html - 使用 flex 时父 div 的高度大于其子 div

Question

我有 3 个 div 包裹在 2 个父 div 中。所有 3 个子 div 内部都有一个 div， 分配了 height。问题是，子级 div 包装器(类名为 content 的)的高度等于最大的子级 div 的高度。

emmet版本的HTML层级如下:div>div>(div>div)*3

如何让 content 类的 div 与其子元素具有相同的高度？

JSFiddle

var first = document.getElementById('first');

console.log(first.offsetHeight + ' ' + first.firstElementChild.offsetHeight); // 250 200
// How can I get them both to be 200 automatically?

.content {
  overflow: hidden;
}
.wrapperLongInner {
  display: flex;
}
.wrapperShortOuter {
  overflow: hidden;
}

<div class="wrapperShortOuter" style="width: 300px;">
  <div class="wrapperLongInner" style="width: 600px;">
    <div class="content" id="first" style="width: 300px">
      <div style="background-color: turquoise; width: 300px; height: 200px;"></div>
    </div>
    <div class="content" id="second" style="width: 0px;">
      <div style="background-color: burlywood; width: 300px; height: 150px;"></div>
    </div>
    <div class="content" id="third" style="width: 0px;">
      <div style="background-color: yellowgreen; width: 300px; height: 250px;"></div>
    </div>
  </div>
</div>
<div style="background-color: red; width:50px; height: 100px;"></div>

Answer 1

目前还不完全清楚您要做什么，但 flex 容器中的默认垂直尺寸(align-items)是stretch。

如果将其更改为 flex-start，则高度均为 200。

var first = document.getElementById('first');

alert(first.offsetHeight + ' ' + first.firstElementChild.offsetHeight); // 250 200
// How can I get them both to be 200 automatically?

.wrapperShortOuter {
  width: 300px;
  background: #000;
}
.wrapperLongInner {
  display: flex;
  width: 600px;
  align-items: flex-start;
  ;
}
#first {
  width: 300px;
}
#first div {
  background-color: turquoise;
  width: 300px;
  height: 200px;
}
#second {
  width: 0;
}
#second div {
  background-color: burlywood;
  width: 300px;
  height: 150px;
}
#third {
  width: 0;
}
#third div {
  background-color: yellowgreen;
  width: 300px;
  height: 250px;
}
#last {
  background-color: red;
  width: 50px;
  height: 100px;
}

<div class="wrapperShortOuter">
  <div class="wrapperLongInner">
    <div class="content" id="first">
      <div></div>
    </div>
    <div class="content" id="second" style="width: 0px;">
      <div></div>
    </div>
    <div class="content" id="third" style="width: 0px;">
      <div></div>
    </div>
  </div>
</div>
<div id="last"></div>