根据文本长度设置div背景颜色

Question

I have a section on website where different testimonials appear and the div has a background color which appears fine on desktop but if viewed on mobile devices the testimonials text runs longer (vertically) than the background height.

This is the class that is assigned to the div

.quote{
    background-color: #f7f7f7 !important;
    border: 8px none;
    height: 350px;
    padding: 15px;
}

Now I know that the height is fixed to 350px but if I change that to 100% or auto that does not work. I need the background to appear as long as the text appears.

Answer 1

If you want the div to be 350px in height, then you're doing it right. But you will need to add overflow-y: hidden; or overflow-y: auto .

However, I do suggest you simply change height to min-height if you want the div to grow with the text.