如何使用flexbox将项目与flex-end对齐，并使用flex grow将文本与底部对齐？

Question

我正在尝试实现以下布局。不知道是否可能。我不想设置固定的高度，因为内容可能会更改。

我当前的标记：

.company__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.company__company {
  text-align: center;
  width: 33.333333%;
  position: relative;
  margin: 40px 0;
  display: flex;
  flex-direction: column;
}

.company__title {
  padding-bottom: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.company__title__inner {
  align-self: flex-end;
  width: 100%;
  display: block;
}

.company__main_title {
  padding-bottom: 30px;
}

.company__description {
  max-width: 350px;
  margin: 0 auto;
  padding-top: 30px;
}

.company__image_container {
  position: relative;
  padding-bottom: 75%;
}

.company__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

<ul class="company__container">
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">Main Title</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">An example of longer title over two lines goes here.</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">Main Title</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">Really long MAIN TITLE demonstrate two lines</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">Main Title</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>
  <li class="company">
    <h3 class="company__title">
      <span class="company__title__inner">Title Here</span>
    </h3>
    <h3 class="company__main_title">Main Title</h3>
    <div class="company__image_container">
      <img class="company__image" src="https://via.placeholder.com/350x150">
    </div>
    <p class="company__description">A bit of descriptive text for each block can go in this space. Probably over a three or four lines.</p>
  </li>

</ul>