This question has already been answered:

By clicking on the button js forms the minimum block that I want to place in the mini scroll bar

$('#add-photo').on('click', function() { let add = '<div class="image-block"><div class="image"></div><input type="text" name="photo_name" class="notot-name-position"></div>' $('.photo-list').append(add) }) 
 .modal { width: 700px; min-height: 500px; margin: auto auto; background-color: #ffffff; border-radius: 10px; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #add-photo { margin: 150px 0 15px 0; padding: 4px 10px; border-radius: 3px; } .photo-list { height: 130px; background-color: #3097D1; padding: 5px 0; box-sizing: border-box; position: relative; /*overflow-y: scroll; !* прокрутка по вертикали *!*/ overflow: auto; } .image-block { float: left; height: 100%; margin: 0 3px; background-color: rgba(0, 0, 0, 0.2); } 
 <div class="modal"> <button id="add-photo">Add photo</button> <div class="photo-list"> </div> </div>

For clarity

What properties do I miss? thank

Reported as a duplicate by Air members, Community Spirit ♦ Aug 17 '18 at 8:42 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • To add a block to the beginning, use the .prepend() method. append() adds to the end. In order for the blocks not to be transferred you can use css flex - zhurof

2 answers 2

display: flex; - you must ask the parent

 $('#add-photo').on('click', function() { let add = '<div class="image-block"><div class="image"></div><input type="text" name="photo_name" class="notot-name-position"></div>' $('.photo-list').append(add) }) 
 .modal { width: 700px; min-height: 500px; margin: auto auto; background-color: #ffffff; border-radius: 10px; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #add-photo { margin: 150px 0 15px 0; padding: 4px 10px; border-radius: 3px; } .photo-list { display: flex; height: 130px; background-color: #3097D1; padding: 5px 0; box-sizing: border-box; position: relative; /*overflow-y: scroll; !* прокрутка по вертикали *!*/ overflow: auto; } .image-block { float: left; height: 100%; margin: 0 3px; background-color: rgba(0, 0, 0, 0.2); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal"> <button id="add-photo">Add photo</button> <div class="photo-list"> </div> </div>

    Perhaps you need to add to the styles in the class .image-block

     display: inline-block;