dropdown div在其父容器内切断

Question

我有这个HTML代码

<div class="cos_data_table_header_right">
    <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            <i class="fa fa-download"></i>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    <button class="btn btn-default"><i class="fa fa-search"></i></button>
</div>

和.cosdata_table_header的这个css

.cosdata_table_header{
    padding: 10px;
    background: #cacaca;
    display: block;
}

问题是，.cosdata_table_header的默认样式没有包装它的子节点，但是下拉的东西工作正常但是如果我将它设置为overflow：auto，.cosdata_table_header包装它的子节点，如果我点击下拉按钮，它的内容已被截断，并且.cosdata_table_header中显示了一个糟糕的滚动条，如果我将.cosdata_table_header的样式设置为overflow：hidden，则不显示下拉内容（参见下文）。

任何有助于此工作的帮助，建议，建议，想法和线索？

PS：我正在使用bootstrap 3作为下拉列表。

Answer 1

您可以在JSFiddle中重现问题吗？我建议尝试在chrome开发人员工具或Firebug中调试你的布局。

Answer 2

忽略html类与你的选择器不匹配（可能是拼写错误吗？）我会说不要让容器显示块并使溢出可见。这样，您的按钮就可以与其他内容一起使用，下拉列表会与其他内容重叠，而不会扩展整个容器。我没有经过测试，但如果是我，这是我会尝试的第一件事。

JSFiddle或指向开发网站的链接或某些内容可以更容易地查看正在进行的操作并处理答案