$("#press").click(function() { $("#library").css("height", "50px"); } );
<div id="library"> <ul> <li id="add-button-button" class="library-item">Button</li> <li id="add-text-button" class="library-item">Text</li> <li id="add-image-button" class="library-item">Image</li> <li id="add-map-button" class="library-item">Map</li> <li id="add-textinput-button" class="library-item">Input</li> <li id="add-gpsIndicator-button" class="library-item">GPS</li> </ul> </div> <button id="press">Press me to shrink the list</button>
#library { width: 150px; height: 100px; overflow: auto; border: 1px solid black; } #library li.library-item { -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; width: 50%; height: 20px; float: left; text-align: center; }