child divs resize after the biggest div - css

Question

i am trying to set 3 divs inside the parent div, the parent div will resize after the biggest height of the child divs but i also want the other 2 child divs to take the same size as the biggest one in height.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
the parent div will be 600px width and no height given so it will expand depending of the child div biggest height.
#parent {
width: 600px;
overflow: auto;
}
.child {
width: 200px;
float: left;
}
This is what i got so far but if the child divs have different heights, the parent div height is the biggest of the child div heights, but the other 2 child divs dont take the height of the parent ( of the biggest child div in height).
Thank you in advance,
Daniel!

Answer 1

This: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks and this: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ may help.

Answer 2

One way would be to use the new feature from CSS display: grid
#parent {
display: grid;
width: 100%;
grid-template-columns: auto auto auto;
/* Just for styling */
text-align: center;
}
.child {
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
padding: 20px;
}
<div id="parent">
<div class="child">This is first</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>
Or another one would be the display: flex.
#parent {
display: flex;
flex-flow: row nowrap;
}
.child {
width: 33.3333%; /* Force the column to be a third of the parent width */
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
text-align: center;
padding: 20px;
}
<div id="parent">
<div class="child">The first one</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>