Shrink children to fit parent

I have a fixed-size div with variable amount of child elements. I don't know the size of the children in advance. The goal is to shrink them to fit the parent.

Example:

.parent {
  width: 100px;
  height: 100px;
  border: 2px dashed green;
}
.parent * {
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img src="https://placehold.it/250x400" />
  <img src="https://placehold.it/300x250" />
</div>

max-width etc seems to individually shrink a child to be no larger than the parent; Any elements after the first burst out.

Ideas to contain them all together?