如何在不设置高度的情况下制作全高框：100％

Question

我有一个这样的产品列表：

<ul class="products">
          <li>
            <div class="product">
              <div class="product-image">
                <a href="./details"
                  ><img src="./images/d1.jpg" alt="product"
                /></a>
              </div>
              <div class="product-name">
                <a href="./detail.html">Versache Classic Shirt</a>
              </div>
              <div class="product-brand">Versache</div>
              <div class="product-price">$140</div>
              <div class="product-rating">4.5 starts (1,456)</div>
            </div>
          </li>
</ul>

.products {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;

  list-style-type: none;
}
.products > li {
  flex: 0 0 34rem;
  height: 48rem;
  margin: 1rem;
  border-bottom: 0.1rem #c0c0c0 solid;
}
.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-image img {
  max-width: 34rem;
  max-height: 34rem;
}

我希望div.product内的所有div垂直拉伸，但不是垂直拉伸。如果我将product > li设置为height：100％，它可以工作，但是我想用flexbox的方式来实现传统的方式。

我该怎么做？