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;
}

如何使div表现得像溢出：隐藏和溢出：可见

1 个答案: