Make flexbox children with same height - css

Question

I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}

Answer 1

Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>