Bootstrap下拉“跨越”div

Question

我有一个Bootstrap下拉菜单，我想放在div的右边，如下所示： （虚线是下一个div的边缘。）

当我打开列表时，它会被填充到宽度，然后换行到下一行：

是否有可能使列表的边缘变为＆＃34;跨越＆＃34;边界进入下一个div而不影响它？

当前CSS

/* enclosing div */
#section-left {
    padding: 1em;
    left: 0;
    width: 30%;

    overflow-x: hidden;
    overflow-y: auto;
    border-right: 3px dashed #aaa;
}

/* the div to the right in the screenshots */
#section-middle {
    left: 25%;
    width: 45%;
    overflow-y: auto;
}

/* where the dropdown and image are held */
#section-left-right {
    float: right;
    height: 120px;
}

#lessons-dropdown {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 1em 0 1em;
}

#lessons-progress-list li {
    padding: 0 1em;
}


#knacke-small {
    height: 100px;
}

HTML

<div id="section-left" class="column">

        <div id="section-left-right">
            <div class="dropdown" id="lessons-dropdown">
              <a data-toggle="dropdown" href="#">&#9776; Lektionslista</a>
              <ul class="dropdown-menu" id="lessons-progress-list" role="menu" aria-labelledby="dLabel"> 
                        <!-- populated dynamically with <li>s -->
              </ul>
            </div>
            <br/>
            <img src=... id="knacke-small">
        </div>
             ...
 </div>

 <div id="section-middle">...

Answer 1

您的容器section-left有overflow，它不允许内部div显示在限制之外。我不知道其余的代码。你真的需要吗？

check it without the overflow