Html 在FlexBox中将div拉伸到父div的完全高度

如何使用FlexBox将.Body div(黄色背景)拉伸到父div.con的完全高度？

Html:

<div class="flex-container">
  <div class="con con-1">
      <div class="head">
        Lorem ipsum dolar sit amit, de decto.
      </div>
      <div class="body">
      Lorem ipsum dolar sit amit, de decto.
      </div>
  </div>
  <div class="con con-2">
      <div class="head">
        Lorem ipsum dolar sit amit, de decto.
      </div>
      <div class="body">
      Lorem ipsum dolar sit amit, de decto.  Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto.
      </div>
  </div>
  <div class="con con-3">
      <div class="head">
        Lorem ipsum dolar sit amit, de decto.
      </div>
      <div class="body">
      Lorem ipsum dolar sit amit, de decto.  Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto.
      </div>
  </div>
</div>

Css:以下内容:

.flex-container {
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
}
.con {
  width: 33%;
  border: 1px solid #000;
}
.head {
  background: #eee;
  padding: 15px;
}
.body {
  background: yellow;
  padding: 15px;
}

JSFiddle Link个

我try 了所有的方法，浏览器搜索等等，我希望它能在这里得到解决，我也认为这对社区来说是一个有价值的问题