Gallery container not stretching/expanding to fit unique content but staying fixed at one size (of the largest child element in the gallery)?

Question

Gallery containers are not automatically stretching/shrinking to accommodate unique content? Remaining a fixed height (largest child) for every gallery element.

First, I created several containers ('thumbnail2') inside a larger container ('two') and arranged them in CSS using flexbox. Then I added one image (all different sizes) and some text (different content) to six different 'thumbnail2' divs in HTML.

The containers ('thumbnail2') holding the image+text aren't dynamically adjusting to accommodate the content inside. Everything is displayed, but the height of the containers seems to be fixed to the size of the largest child elements, so there is quite a lot of empty space around the containers with less content inside. I want each container to stretch and contract automatically to fit what is inside it. I thought if I left out 'height' in the CSS, then it would do this automatically?

I'm left with an unevenly spaced gallery. Will the container stay fixed at one size if it is filled with divs of different sizes?

How do I get the spacing between each element spaced evenly down each column?

HTML:

<div class="two">

<div class="thumbnail2">

  <div class="photo">
    <img src="img/DP2.jpg" alt="DP2">
    </div>

    <div class="phototext">
      <h3>Glossy, shiny leaves</h3>
      <h4>
        Set your past on fire and leave. 
        </h4>
      </div>

  </div>

CSS:

.two {
  width: 750px;
  margin:10px;
display:flex;
justify-content: center;
  flex-flow:row wrap;
  border-bottom: 1px solid black;
}

.thumbnail2 {
  width:220px;
background-color: violet;
  margin:10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
}

.photo {
  width:220px;
line-height: 0;
  background-color: skyblue;
}

.photo img {
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: top;
}

.phototext {
  width:220px;
height:auto;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
}