Автоматическое расширение цвета фона div с его содержанием

Question

У меня есть div и внутри, что у меня есть три абзаца. И родитель div имеет набор цветов фона. Я хочу развернуть height родителя div по вертикали, когда содержимое абзаца увеличивается.

HTML:

<div class="cart-item"> 
    <p class="item-name">We will reinforce some test dat some test data</p> 
    <p class="item-price">25.87</p> 
    <p><input type="text" id="txtCount" maxlength="2" class="prod-qty" name="quantity" value="1"></p> 
</div> 

CSS:

.cart-item { 
    line-height: 30px; 
    clear: both; 
    padding: 0.3em; 
    /* background: #eeeeee; */ 
    /* border: 1px solid #DDDDDD; */ 
    color: #333333; 
    background: #eeeeee repeat-y; 
} 

.cart-item p { 
    float: left; 
} 

Answer 1

Вы можете просто добавить:

.cart-item { 
    overflow: hidden; 
} 

Или использовать четкие исправления:

.cart-item:after { 
    content: ""; 
    display: table; 
    clear: both; 
}