stretch a div to full height of the parent div in flexbox

Issue

How can i get .body div (yellow background) stretch to full height of the parent div .con with flexbox?

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

I tried everything, browser search etc., i hope it will be solved in here, and also i think its a valueable question for the community

Solution

You need the .con elements to also be display: flex so you can have their children fill the space. For example

.flex-container {
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
}
.con {
  width: 33%;
  border: 1px solid #000;
  display: flex; /* make it a flex box */
  flex-direction: column; /* have things be verticle */
}
.head {
  background: #eee;
  padding: 15px;
}
.body {
  background: yellow;
  padding: 15px;
  flex-grow: 1; /* new style to say fill the space */
}

Answered By - Joe Lissner