Bootstrap Typeahead搜索结果包含在div包装器中

Question

我的搜索栏包含在具有背景颜色的包装中。搜索结果不可见，因为它包装在包装器div中。现在我想以某种方式显示完整的结果。此外，我尝试了z-index，但没有帮助。

HTML：

<div class="col-md-12">
<div class="search_box_container">
    <form>
        <div class="col-md-10"> 
            <input id="typeahead" type="text" data-provide="typeahead" class="form-control search_bar" name="search_bar" auto-complete="off">
        </div>
        <div class="col-md-2">
            <button class="search_bar_button"></button>
        </div>
    </form>
  </div>
</div>

CSS FOR WRAPPER：

.search_box_container{
padding: 0.5em;
background-color: #f0f0f0;
border-radius: 6px;
border:1px solid #DBDBDB;
position: relative;
overflow:hidden;
}

.search_bar{
height: 2.2em;
font-size: 1.45em;
color: black;
font-family: inherit;
} 

.search_bar_button{
margin-top: 1px;
margin-left:-5px;
border-radius: 4px;
background: url('../img/search_bar_button.png') 0 0 no-repeat;
width: 5.2em;
background-position: 0px -2px;
height: 3.05em;
border: 2px solid #067b19;
}

JSFiddle