css - Bootstrap 下拉列表 "across"div

Question

我有一个 Bootstrap 下拉菜单，我想将其放在 div 的右侧，如下所示: (虚线是下一个 div 的边缘。)

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

是否有可能使列表的边缘“越过”边界进入下一个 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