Subproducts disappear on small screen

I'm trying to make my forms responsive.  Several of my forms have products with subproducts.  When the form is displayed on a device with a smaller screen, the bottom subproducts are overlaid by the product below.  My sense is that the form-product-child-table needs some CSS to prevent this, but I don't know what to do.  Can you help?  Thanks!

Additional note:  The truncation doesn't just affect the subproducts, but even the top labels of the product.

You can set the min-height of your products. However, you would need to use a different height for each screen resolution. Example:

.form-product-item {

    min-height: 230px!important;

}

@media only screen and (min-width: 768px){

  .form-product-item {

    min-height: 400px!important;

}

}

Thank you.  However, I don't think this solution does the trick.  Screens smaller than 768 still show the bottom subproducts cut off.  Also, this code causes excessive space between products on larger screens.

I tried the following instead:

    .form-product-item-detail {
        height: initial !important;
    }

With a quick look, I think it works.  Do you think this code is correct?

Thank you.

That code is correct, I checked the form on my end, and found not issues with the products, they were still shown when resizing the browser window.

Let us know if you have more questions.

Thanks!