Написал такой код. Планируется что слева в каждом блоке будет картинка, а справа будет сверху название, снизу описание. Но проблема в том что блок с текстом из-за длины занимает все 100% блока и переносится на следующую строку.
Как сделать что бы текст не переносило на следующую строку, при этом сохранив гибкость, то есть не задавая ширину блоков, она может постоянно меняться позже?
JSFiddle: https://jsfiddle.net/6arnozcs/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.shop_block {
max-height: 300px;
overflow: auto;
width: 400px;
}
.shop_item {
background: #ccc;
}
.shop_item:hover {
background: #999;
}
.shop_item>div {
float: left;
}
.shopitem_cont {
height: 64px;
overflow: hidden;
box-sizing: border-box;
padding: 5px 10px 3px 8px;
}
.shopitem_head {
font-size: 18px;
padding: 0 0 3px 0;
margin: 0 0 3px 0;
border-bottom: 1px solid #000;
}
<div class="shop_block">
<div class="shop_item clearfix">
<div class="shopitem_image">
<img src="http://placehold.it/64x64">
</div>
<div class="shopitem_cont">
<div class="shopitem_head">Item 0</div>
Description is here. На самом деле описание настоооолько большое что просто не влазит в этот блок.
</div>
</div>
<div class="shop_item clearfix">
<div class="shopitem_image">
<img src="http://placehold.it/64x64">
</div>
<div class="shopitem_cont">
<div class="shopitem_head">Item 0</div>
Description is here. На самом деле описание настоооолько большое что просто не влазит в этот блок.
</div>
</div>
</div>