<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="select2@4.0.0" data-semver="4.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />
<link data-require="select2-bootstrap-css@1.4.6" data-semver="1.4.6" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" />
<script data-require="select2@4.0.0" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<style>
body {
font-family: Arial;
}
.contentOverflow {
width: 450px;
height: 200px;
border: 1px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<div class="contentOverflow">
<div class="row">
<div class="col-xs-12">
<h1>Hello Plunker!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, nihil consequuntur nisi ut expedita. Cupiditate, natus iste laborum vel iure odio dignissimos. Reprehenderit numquam ex sed error omnis unde! Incidunt.</p>
<select id="e1">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
<option value="red">red</option><option value="blue">blue</option><option value="green">green</option>
</select>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, cum, placeat dignissimos ab provident nulla nostrum nam dolorem officia quaerat commodi consequatur fugiat impedit quisquam molestias expedita culpa nisi facilis.</div>
<div>Eius, earum repellat veniam perferendis autem quos culpa aliquid a consequatur at aperiam porro explicabo laudantium ut magni obcaecati doloremque accusamus quasi rem sed minima blanditiis voluptates dolor molestiae velit?</div>
<div>Alias, est, libero, harum ullam impedit iste aliquam consequatur a eaque labore mollitia modi non tempora eveniet illo minus quia praesentium nesciunt fuga veniam dolor sequi tempore velit accusantium nemo.</div>
</div>
</div>
</div>
</div>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, temporibus, excepturi, et, delectus soluta recusandae dolorem rem minus earum deleniti tenetur id incidunt optio quibusdam magni ipsa commodi perspiciatis quaerat.</div>
<div>Dolores, voluptatibus, rerum, natus nobis aliquid consequuntur porro enim cumque exercitationem eligendi fugiat illo sequi unde eveniet nam corrupti voluptates ut. Illum, ratione, quae ducimus omnis repudiandae laborum esse harum.</div>
<div>Illum, labore repellendus optio fuga laudantium exercitationem odio corporis molestias iure expedita! Repellat, sunt, reprehenderit magni error aspernatur sit nulla in saepe aliquid impedit omnis dolor iure! Quisquam, totam, ullam.</div>
<div>Repellat, ratione, porro, eius, deleniti delectus eveniet amet adipisci deserunt at dolore corporis est beatae sapiente quaerat voluptatem ullam dignissimos ab dolorem fugiat eligendi possimus blanditiis fugit nam. Magnam, eius.</div>
<div>Porro, fuga, repudiandae ad iste distinctio consequuntur eum facere adipisci animi aspernatur error omnis reiciendis neque perferendis sit hic sunt eius et provident voluptate. Tenetur vitae qui aut voluptas modi?</div>
<div>Illum, doloribus, reiciendis, nam ipsa modi voluptatum omnis ullam fugiat provident laudantium eligendi autem repudiandae quidem dolore dolor dolorem cumque earum necessitatibus aliquid porro maxime. Nobis, unde ratione est dolorum!</div>
<div>Quisquam, impedit, nulla, dignissimos accusamus harum culpa error rem aut commodi autem veniam suscipit consequuntur similique. Dolores, neque, nulla, doloribus magnam voluptate provident culpa molestiae reprehenderit illum nesciunt suscipit cumque.</div>
<div>Voluptatem, reprehenderit accusantium dicta laudantium amet quaerat omnis tempora autem beatae rem quibusdam hic illum unde quod est facilis fugit minima veritatis doloremque enim reiciendis perspiciatis quo voluptates? Eius, beatae.</div>
<div>Eveniet, molestiae ipsam ullam maxime nam voluptates asperiores tempore inventore eligendi delectus nobis et non quo doloremque repellendus dicta veniam aliquid provident voluptatum voluptas voluptate blanditiis harum necessitatibus officia libero.</div>
<div>Provident, pariatur, quo, fugiat, itaque ad iure accusantium ratione a distinctio dolore odio natus obcaecati. Id, alias eos dicta qui distinctio dolorem unde quidem impedit recusandae deleniti. Sapiente, consequatur, libero.</div>
<div>Doloribus, quidem nisi incidunt error repudiandae dicta fuga sapiente recusandae alias quod? Amet, culpa quas quidem nulla doloribus nisi odit dolorem quibusdam vitae libero. Quis, commodi explicabo autem consequuntur beatae!</div>
<div>Blanditiis, accusamus repellat eligendi vitae nihil inventore officia ratione ipsam suscipit cum repellendus odit qui nulla alias provident culpa assumenda! Consequuntur labore autem quaerat modi blanditiis mollitia natus velit deleniti?</div>
<div>Reprehenderit, quidem quod quisquam placeat iste tempore rerum! Deleniti, reprehenderit, incidunt laboriosam quas numquam commodi fugit accusamus id fuga ex natus illo qui. Quo, quasi id odio aliquid ipsam repellendus.</div>
<div>Nam, pariatur deleniti velit laborum iste ipsa officia commodi? At, a, in vero sapiente blanditiis et error perspiciatis earum neque nulla obcaecati vel tempore incidunt assumenda aliquam. Nulla, reprehenderit, soluta.</div>
<div>Consequatur, illo nihil deserunt vero provident aliquam temporibus debitis numquam commodi facilis nisi esse. Sequi, nemo, saepe, eveniet tempore labore earum voluptates veritatis atque animi aliquid sint alias unde aperiam!</div>
<div>Et, nemo, odio recusandae eius animi dolorem hic placeat doloremque esse neque voluptatem cumque accusantium ea accusamus deleniti. Eligendi, delectus illum sed iusto voluptate architecto culpa aliquid perspiciatis ipsam minus!</div>
<div>Itaque, molestiae, quasi, ducimus, quis dolore corrupti eum ab iusto reprehenderit magnam ex placeat autem odit voluptate temporibus atque et aliquid sunt officia sed. Facere, consequatur exercitationem suscipit iusto ipsa!</div>
<div>Exercitationem, aut quasi vel dolorum tempore provident obcaecati eos placeat unde delectus id consectetur dolor? Rem, vel, illo, voluptate, odio id veritatis et asperiores ratione beatae facilis quaerat sequi doloribus?</div>
<div>Dolor, neque, nemo, exercitationem excepturi quod atque deleniti hic cupiditate quaerat unde et necessitatibus architecto voluptates. Ad provident dolorum nemo dolore. Assumenda, facere a nulla. Illum alias magni officiis dolorum.</div>
<div>Magni, odio esse quibusdam. Soluta, odit, dolorum aspernatur omnis non dolore enim aliquam inventore minima a? Possimus, necessitatibus, accusamus, vitae, unde nesciunt suscipit pariatur corrupti culpa provident ducimus aperiam quaerat.</div>
</div>
<script>
$(document).ready(function() {
$("#e1").select2({
tags: true
});
});
</script>
</body>
</html>