如何使格表現得像溢出：隱藏和溢出：可見

Question

HTML

<div class="select2-container select2-container-multi" id="s2id_5268118036b78"> 
    <ul class="select2-choices"> 
     <li class="select2-search-choice"> 
      <div>aaaaa aaaaaaa</div> 
      <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li> 
     <li class="select2-search-choice"> 
      <div>bbbb bbbbbbbbb</div> 
      <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li> 
     <li class="select2-search-choice"> 
      <div>ccc ccc ccccccccc</div> 
      <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li> 
     <li class="select2-search-field"><input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input" id="s2id_autogen4" style="width: 10px;"> 
     </li> 
    </ul> 
    <div class="select2-drop select2-drop-multi select2-display-none select2-drop-active"> 
     <ul class="select2-results"> 
      <li class="select2-no-results">No matches found</li> 
     </ul> 
    </div> 
</div> 

相關CSS

.select2-container-multi { 
    margin: 10px; 
    width: 250px; 

    .select2-choices { 
    overflow: visible; 
    } 
} 

Code Pen

正如你所看到的，有點灰當設置了overflow: visible時，箱子（「bbb」和「ccc」）浮在容器外部。如果我將其更改爲overflow: hidden，那麼它們的容器會擴展以適合它們。

我想容器擴大到適合他們，但我也申請一些JavaScript給他們，使他們可拖動，這樣他們就可以框外拉。如果設置了overflow: hidden，那麼它們會被剪切到框中，並且一旦將它們拖出，您將無法看到它們。這就是我嘗試使用overflow: visible的原因。

因此，我需要兩者的行爲。是否有一些CSS我可以申請使框擴展到適合其子，但也有overflow: visible？

請注意，overflow: auto只是創建滾動條，這也不好。

Answer 1

你試過給它一個浮動嗎？

.select2-container-multi .select2-choices { 
overflow: visible; 
float: left; 
}