如何在文本下方垂直堆叠不同高度的元素

Question

尝试堆叠从左到右的元素，并删除彼此上方的元素之间的间距，并在每个元素的下方居中显示文本。

.container {
  width: 800px;
  border: 2px solid black;
  display: -ms-flexbox;
  -ms-flexbox-wrap: wrap;
  -ms-flexbox-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}

.flex-box {
  width: 100%;
  list-style: none;
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
}

.flex-box li {
  display: inline-grid;
  vertical-align: middle;
  padding: 20px;
}

.flex-box img {
  float: left;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 450px;
  display: block;
}

.flex-box p {
  display: inline-block;
  text-align: center;
}

<div class="container">
  <ul class="flex-box">
    <li class="col-md-6">
      <img src="https://picsum.photos/248/248">
      <p>Text underneath picture 1</p>
    </li>
    <li class="col-md-6">
      <img src="https://picsum.photos/300/400">
      <p>Text underneath picture 2</p>
    </li>
  </ul>
</div>

我想要什么： https://imgur.com/a/a8rpi03

我所拥有的： https://imgur.com/oapSwpv