html - 如何使 div 表现得像溢出 :hidden and overflow:visible

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

你试过给它一个 float 吗？

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