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?

Solution

CSS

display with table values to make the nodes to conform within it's parent's dimensions.
position with relative for parent and absolute for children in order to keep them within their parent's borders.

In the demo both parents and images are identical but with one exception: the first parent is 200x200px and the second parent is 100x100px. As we can see, the children have conformed perfectly within the parent's borders regardless of how parent's dimensions are.

Details are commented in demo

Demo

.parent {
  width: 200px;
  height: 200px;
  border: 2px dashed green;
  /* Behaves like a table
  || which means that any 
  || table elements and elements
  || styled to behave like a 
  || table element will conform
  || to it's parent while maintaining
  || it's aspect ratio.
  */
  display: table;
  /* This will enable children to stay 
  || within it's borders if they are
  || absolutely positioned
  */
  position: relative;
}

.ver2 {
  width: 100px;
  height: 100px;
}

.parent * {
  max-width: 100%;
  max-height: 100%;
  /* Behaves as a <td> which means
  || it will naturally shrink to
  || conform to the dimensions
  || of it's parent if it is a
  || table or an element styled
  || to behave like a table and 
  || keep it's aspect ratio.
  */
  display: table-cell;
  /* It will stay within the confines
  || of the borders of it's parent
  || (unless it's given negative 
  || values)
  */
  position: absolute;
}

img:first-of-type {
  top: 0;
  left: 0;
  /* Layered on top of img1
  || to show it's position
  || within the parent
  */
  z-index: 1;
  /* used to show where img1 is. */
  opacity: .5;
}

img:last-of-type {
  bottom: 0;
  right: 0;
}

.demoOnly {
  float: right;
  display: inline-block;
}

<div class='demoOnly'>
  <div class="parent ver2">
    <img src="https://placehold.co/250x400/f00/fcf?text=img1" />
    <img src="https://placehold.co/300x250/fc0/f00?text=img2" />
  </div>
  <span>Parent is 100x100px<br>
img1 is AR 5:8 - 62.5x100px<br>
img2 is AR 6:5 - 100x83px</span>
</div>

<div class="parent">
  <img src="https://placehold.co/250x400/f00/fcf?text=img1" />
  <img src="https://placehold.co/300x250/fc0/f00?text=img2" />
</div>
<span>Parent is 200x200px<br>
img1 is AR 5:8 - 125x200px<br>
img2 is AR 6:5 - 200x166px</span>