Как заставить div вести себя как переполнение: скрытое и переполнение: видимое

0

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

Как вы можете видеть, маленькие серые прямоугольники ("bbb" и "ccc") плавают за пределами их контейнера, когда overflow: visible установлено. Если я изменю это на overflow: hidden, то их контейнер будет расширяться, чтобы соответствовать им.

Я хочу, чтобы контейнер расширялся, чтобы соответствовать им, но я также применяю к ним JavaScript, чтобы сделать их перетаскиваемыми, поэтому их можно вытащить за пределы поля. Если overflow: hidden установлено, то их обрезают в поле, и вы не сможете их увидеть, как только вы их вытащите. Вот почему я пытался overflow: visible.

Таким образом, мне нужно поведение обоих. Есть ли какой-нибудь CSS, который я могу применить, чтобы сделать окно расширяемым, чтобы оно соответствовало его дочерним элементам, но также имеет overflow: visible?

Обратите внимание, что overflow: auto просто создает полосы прокрутки, что тоже не хорошо.

Теги:

1 ответ

1
Лучший ответ

вы пытались дать ему поплавок?

.select2-container-multi .select2-choices {
overflow: visible;
float: left;
}
  • 0
    Это на самом деле выглядит, как это работает! Это произошло потому , что li s всплывают ... не из - за какой - то странной видимости. Не понял, что это проблема с исправлением ошибок. Спасибо!
  • 0
    пожалуйста :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню