Wrote such code. It is planned that on the left in each block there will be a picture, and on the right will be the name above, below the description. But the problem is that the block with the text because of the length takes up all 100% of the block and is transferred to the next line.

How to make the text not transfer to the next line, while maintaining flexibility, that is, without specifying the width of the blocks, can it constantly change later?

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>

    1 answer 1

    There is a great bunch of float: left / right; + overflow: hidden . This technique looks like this:

     .container { border: 1px solid #000; padding: 10px; margin: 0 0 10px; } .container:after { display: table; content: ''; clear: both; } .container__left { float: left; margin: 0 10px 0 0; } .container__right { overflow: hidden; padding: 10px; border: 1px solid #ccc; } .container__right p { margin: 0; } 
     <div class="container"> <div class="container__left"> <img src="http://placehold.it/64x64" /> </div> <div class="container__right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At harum eaque sint.</p> </div> </div> <div class="container"> <div class="container__left"> <img src="http://placehold.it/128x64" /> </div> <div class="container__right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At harum eaque sint. Quas sint quia repellat, qui blanditiis odit harum delectus cum illum.</p> </div> </div>

    Well, in general - use flexbox if the stack of browsers allows :)

    • I haven’t dealt with flexbox yet, but all the facts say it’s time. Huge thanks! - Telion