Css 带中断列的产品显示-woocommerce

我的商店页面很好地展示了产品，但是如果我的标题比图片witdh大，标题就会出现，并打破了witdh栏，如你所见

我正在寻找一个css来修复（修复）我的列，并且不破坏我的布局。有人能帮我吗

上面是我用来显示产品和包装行的CSS。

.products { /*****styling products*****/
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  margin-right: 0.5rem;

}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  flex-grow: 1;
  flex-basis: 20%;
  display: flex; 
}

---

您需要改进您的问题。用你提供的信息不可能知道你想要达到什么目的。我编辑了我的问题。男人。但我想做的是恰当地展示和设计我的产品。我的标题不尊重witdh列，如果我使用宽度：20%，flex box将无法工作，并且每行显示一个产品。您可以共享演示或实时URL吗？www.quickgamestore.mllive URL仍在使用列表项。