可滚动菜单

Question

我的下拉菜单末尾有两个按钮，应用+清除。在自上而下的滚动菜单之前，两个按钮应占菜单全宽的50％。但是，菜单宽度可根据复选框值的文本长度而变化。在我的下拉菜单的开头，我有一个Typeahead框，而且对于变量菜单框的整个宽度也不宽。此外，该框固定在顶部，但不是整齐，当向下滚动复选框值时，这些值与我的前额框重叠。是否有可能实现这一切？我无法做对。

BOOTPLY中的代码...... BOOTPLY

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	padding: 10px 29px;
	text-align: center;
    background-color:grey
  }
  
.btn_apply {
    float: left;
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	padding: 10px 17px;
	text-align: center;
    background-color:yellow
    }


.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 30px;
	padding-right:30px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
}

.div_form {
	position: absolute;
	bottom: 0;
	bottom: -70px
}

.btn {
	border-radius:0;
	margin-top:5px
}

.dropdown-menu {
	border-radius:0;
	border:5px solid blue;
    position: relative;
    background-color: red;
    border-top-width: 0px;
    min-width:400px
}

.typeahead {
	width:auto;
	margin-left:10px
}

.typeahead {
    position:absolute;
    top:0;
    top:-10px
  }