Bootstrap - Sizing Drop Down List and Set overflow to auto

Question

I am having issues formatting my drop down list. Code is as follows.

<div class="row" id="row02">
    <div class="dropdown" id="meters-toggle-container">
        <button class="btn btn-default dropdown-toggle" type="button" id="metter-dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Meters
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="meters-dropdown-ul" aria-labelledby ="metter-dropdown-btn">"></ul>
    </div>
</div>

List Items are appended via Jquery depending upon an ajax request/response.

var html = "<li><a href='#'>" + meterNumber + "</a></li>"
$("#meters-dropdown-ul").append(html);

After reviewing several css options I have found one that seems to control the width of the drop down how I would like it. I am having dificulty of 1) containing the drop down inside of its row parent and 2) setting the menue to overflow so that it can be scrolled through.

As you can see in the picture bellow. The dropdown menu not onlyy runs past its parents boundaries about 50% of the page but runs off the page as well not allowing to view whats beyond.