<!DOCTYPE html>
<html>
<head>
<style>
td {
width: 50%;
background-color: lightgray;
}
.flex {
display: flex;
flex-direction: column;
align-items: stretch;
background-color: yellow;
height: 100%;
}
.item {
background-color: green;
flex-grow: 1;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>padding<br>padding<br>padding<br>padding<br>padding<br>padding<br></td>
<td>
<div class="flex">
<div class="item">mmm
</div>
<div class="item">mmm
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Как сделать так, чтобы div.flex растянулся на всю высоту (и растянул своих детей div.item)?