Align flex children to top - css

Question

How do I get flexbox children to line up vertically to the top edge of each row?
HTML:
#container {
align-items: flex-start;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.child {
margin: auto;
border: 1px dotted #CCC;
}
img, h3 {
width: 160px;
}
<div id="container">
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>The quick brown fox jumps over the lazy dog</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
</div>
Demo: https://codepen.io/anon/pen/GOBzOp
What I see is but I want it to look like

Answer 1

change margin:auto of .child to margin: 0px auto.

Answer 2

Give justify-content: space-around; to #container id instead of justify-content: space-between; and remove margin: auto; to .child class.
#container {
align-items: flex-start;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.child {
border: 1px dotted #CCC;
}
img, h3 {
width: 160px;
}
<div id="container">
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>The quick brown fox jumps over the lazy dog</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
</div>

Answer 3

A simple fix would be changing margin: auto; to margin: 0 auto; this will prevent the box auto centralize vertically but retaining its horizontal alignment, like so:
.child {
border: 1px dotted #CCC;
margin: 0 auto;
}

Answer 4

you can try like
.child {
vertical-align: baseline; //either of them
margin: 0px auto; // any one
}