由于列表上的溢出，下拉菜单不能弹出此列表的左侧（减去margin-left）

Refer to this fiddle: http://jsfiddle.net/od4vjhbc/6/

请参考这个小提琴:http://jsfiddle.net/od4vjhbc/6/

Basically, when overflow is set on #contact-list, the dropdown menu (when clicking on a contact in the list) is not completely shown, as it gets cut.

基本上,当在#contact-list上设置溢出时,下拉菜单(当单击列表中的联系人时)没有完全显示,因为它被切断。

Remove / comment the overflow on #contact-list, then the popup will be fully shown.

删除/注释#contact-list上的溢出,然后弹出窗口将完全显示。

How I can make it work well (menu to be fully shown when clicking the contact) even if overflow is set? (Overflow required if there are a lot of contacts in the list).

即使设置了溢出,如何使其工作良好(单击联系人时菜单也能完全显示)? (如果列表中有很多联系人,则需要溢出)。

What kind of structural change to the HTML should I do, if required?

如果需要,我应该对HTML进行什么样的结构更改?

1 个解决方案

#1

apply your overflow to the .name div instead of the #contact-list

将溢出应用于.name div而不是#contact-list

like this: http://jsfiddle.net/mn01ouat/

像这样:http://jsfiddle.net/mn01ouat/

 #contact-list {
  width: 150px;
  float:right;
  padding: 0;
  margin: 0;
  max-height: 300px;
  /*overflow-y: auto;*/
}

#contact-list .name{
  width: 150px;
  max-height: 300px;
  overflow-y: auto;
}

#1