Как сделать так, чтобы дочерний элемент вышел из родительского элемента CSS multicol / columns?

Question

Многоцветный атрибут columns немного недоиспользуется, но все же удобен для определенных ситуаций, когда flexbox менее полезен, но сетка излишня. В частности, если вы хотите, чтобы строки столбца имели произвольную высоту, или, в моем основном случае, строки первого столбца с произвольным количеством элементов.

Однако я сталкиваюсь с проблемой, когда пытается освободить дочерний элемент от макета столбца.

Есть ли способ вырваться из макета column для дочерних элементов в узле columns, или это относительная позиция дочернего элемента элемент столбца самый большой виновник?

Если бы я переключился на отображение на основе сетки, мог ли дочерний выпадающий элемент выйти из макета сетки? После неудачной попытки и некоторого поиска в Google ({ ссылка }), ответ «нет», grid не может решить эту первую проблему в столбце, даже если он позволяет детям выходить из системы координат.

В примерах вы можете увидеть что без пустого transform: translate3d(0,0,0) раскрывающийся список будет перенесен на следующий столбец, даже если вы используете z-index и абсолютное позиционирование.

Если добавить хак с преобразованием для создания совершенно нового контекста рендеринга, он изменит высоту / макет элемента столбцов root, и элементы, не входящие в первый столбец, будут обрезаны.

Примеры: https://codepen.io/mix3d/pen/yLNpoMY и скопированы здесь: Примечание: используется Alpine. JS просто для повторения элементов и добавления интерактивности, пожалуйста, не добавляйте комментарии, относящиеся к этой части шаблона.

let items = (new Array(20)).fill(0).map((i, idx)=>({show:false, index:idx}))
items.push({show:false, index: "Super long title to show why I need this row for some reason."})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 20px;
}

.columns {
  background: #efefef;
  columns: auto;
  column-width: 200px;
  column-gap: 2em;
  padding: 12px;
  overflow: show;
}

.key {
  display: flex;
  flex-direction: row;
  break-inside: avoid;
  margin-bottom: 0.75em;
  align-items: flex-start;
}

label {
  flex-grow: 1;
  margin-right: 1em;
}

.v-select {
  min-width: 93px;
}

.testing .vs__dropdown-menu {
  transform: none;
}

/**From vue-select*/
.v-select {
  position: relative;
  font-family: inherit;
}

.v-select, .v-select * {
  box-sizing: border-box;
}

.vs--disabled .vs__clear, .vs--disabled .vs__dropdown-toggle, .vs--disabled .vs__open-indicator, .vs--disabled .vs__search, .vs--disabled .vs__selected {
  cursor: not-allowed;
  background-color: #f8f8f8;
}

.v-select[dir=rtl] .vs__actions {
  padding: 0 3px 0 6px;
}

.v-select[dir=rtl] .vs__clear {
  margin-left: 6px;
  margin-right: 0;
}

.v-select[dir=rtl] .vs__deselect {
  margin-left: 0;
  margin-right: 2px;
}

.v-select[dir=rtl] .vs__dropdown-menu {
  text-align: right;
}

.vs__dropdown-toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  padding: 0 0 4px;
  background: none;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  white-space: normal;
}

.vs__selected-options {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0 2px;
  position: relative;
}

.vs__actions {
  display: flex;
  align-items: center;
  padding: 4px 6px 0 3px;
}

.vs--searchable .vs__dropdown-toggle {
  cursor: text;
}

.vs--unsearchable .vs__dropdown-toggle {
  cursor: pointer;
}

.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vs__open-indicator {
  fill: rgba(60, 60, 60, 0.5);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: -webkit-transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
  transition: transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
  transition: transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855), -webkit-transform 0.15s cubic-bezier(1, -0.115, 0.975, 0.855);
  transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
}

.vs--open .vs__open-indicator {
  -webkit-transform: rotate(180deg) scale(1);
  transform: rotate(180deg) scale(1);
}

.vs--loading .vs__open-indicator {
  opacity: 0;
}

.vs__clear {
  fill: rgba(60, 60, 60, 0.5);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 8px;
}

.vs__dropdown-menu {
  display: block;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1000;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  max-height: 350px;
  min-width: 160px;
  overflow-y: auto;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-top-style: none;
  border-radius: 0 0 4px 4px;
  text-align: left;
  list-style: none;
  background: #fff;
  transform: translate3d(0, 0, 0);
  float: left;
}

.vs__no-options {
  text-align: center;
}

.vs__dropdown-option {
  line-height: 1.42857143;
  display: block;
  padding: 3px 20px;
  clear: both;
  color: #333;
  white-space: nowrap;
}

.vs__dropdown-option:hover {
  cursor: pointer;
}

.vs__dropdown-option--highlight {
  background: #5897fb;
  color: #fff;
}

.vs__selected {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  color: #333;
  line-height: 1.4;
  margin: 4px 2px 0;
  padding: 0 0.25em;
}

.vs__deselect {
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-left: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  fill: rgba(60, 60, 60, 0.5);
  text-shadow: 0 1px 0 #fff;
}

.vs--single .vs__selected {
  background-color: transparent;
  border-color: transparent;
}

.vs--single.vs--open .vs__selected {
  position: absolute;
  opacity: 0.4;
}

.vs--single.vs--searching .vs__selected {
  display: none;
}

.vs__search::-ms-clear, .vs__search::-webkit-search-cancel-button, .vs__search::-webkit-search-decoration, .vs__search::-webkit-search-results-button, .vs__search::-webkit-search-results-decoration {
  display: none;
}

.vs__search, .vs__search:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.4;
  font-size: 1em;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 4px 0 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
}

.vs__search::-webkit-input-placeholder {
  color: inherit;
}

.vs__search:-ms-input-placeholder {
  color: inherit;
}

.vs__search::-ms-input-placeholder {
  color: inherit;
}

.vs__search::placeholder {
  color: inherit;
}

.vs--unsearchable .vs__search {
  opacity: 1;
}

.vs--unsearchable .vs__search:hover {
  cursor: pointer;
}

.vs__spinner {
  align-self: center;
  opacity: 0;
  font-size: 5px;
  text-indent: -9999em;
  overflow: hidden;
  border: 0.9em solid rgba(100, 100, 100, 0.1);
  border-left-color: rgba(60, 60, 60, 0.45);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: vSelectSpinner 1.1s linear infinite;
  animation: vSelectSpinner 1.1s linear infinite;
  transition: opacity 0.1s;
}

.vs__spinner, .vs__spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.vs--loading .vs__spinner {
  opacity: 1;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
<h4>Issues Example with Wrap Problem</h4>
<div class="columns testing" x-data="{items}">
<template x-for="item in items" :key="item">
  <div class="key">
    <label x-text="['label-'+item.index]">label</label>
    <div dir="auto" class="v-select vs--single vs--unsearchable">
      <div class="vs__dropdown-toggle" @click="item.show = !item.show">
        <div class="vs__selected-options">
          <span class="vs__selected">None</span>
          <input readonly="readonly" aria-label="Search for option" role="combobox" type="search" autocomplete="off"
            class="vs__search">
        </div>
        <div class="vs__actions">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation"
            class="vs__open-indicator">
            <path
              d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z">
            </path>
          </svg>          
        </div>
      </div>
      <ul role="listbox" class="vs__dropdown-menu"  x-show="item.show" @click="item.show = false">
        <li role="option" class="vs__dropdown-option">
          None
        </li>
        <li role="option" class="vs__dropdown-option">
          0
        </li>
        <li role="option" class="vs__dropdown-option">
          1
        </li>
        <li role="option" class="vs__dropdown-option">
          2
        </li>
        <li role="option" class="vs__dropdown-option">
          3
        </li>
        <li role="option" class="vs__dropdown-option">
          4
        </li>
        <li role="option" class="vs__dropdown-option">
          5
        </li>
        <li role="option" class="vs__dropdown-option">
          6
        </li>
        <li role="option" class="vs__dropdown-option">
          7
        </li>
        <li role="option" class="vs__dropdown-option">
          8
        </li>
        <li role="option" class="vs__dropdown-option">
          9
        </li>
        <li role="option" class="vs__dropdown-option">
          A
        </li>
        <li role="option" class="vs__dropdown-option">
          B
        </li>
        <li role="option" class="vs__dropdown-option">
          C
        </li>
        <li role="option" class="vs__dropdown-option">
          D
        </li>
        <li role="option" class="vs__dropdown-option">
          E
        </li>
        <li role="option" class="vs__dropdown-option">
          F
        </li>
        <li role="option" class="vs__dropdown-option">
          G
        </li>
        <li role="option" class="vs__dropdown-option">
          H
        </li>
        <li role="option" class="vs__dropdown-option">
          I
        </li>
        <li role="option" class="vs__dropdown-option">
          J
        </li>
        <li role="option" class="vs__dropdown-option">
          K
        </li>
        <li role="option" class="vs__dropdown-option">
          L
        </li>
        <li role="option" class="vs__dropdown-option">
          M
        </li>
        <li role="option" class="vs__dropdown-option">
          N
        </li>
        <li role="option" class="vs__dropdown-option">
          O
        </li>
        <li role="option" class="vs__dropdown-option">
          P
        </li>
        <li role="option" class="vs__dropdown-option">
          Q
        </li>
        <li role="option" class="vs__dropdown-option">
          R
        </li>
        <li role="option" class="vs__dropdown-option">
          S
        </li>
        <li role="option" class="vs__dropdown-option">
          T
        </li>
        <li role="option" class="vs__dropdown-option">
          U
        </li>
        <li role="option" class="vs__dropdown-option">
          V
        </li>
        <li role="option" class="vs__dropdown-option">
          W
        </li>
        <li role="option" class="vs__dropdown-option">
          X
        </li>
        <li role="option" class="vs__dropdown-option">
          Y
        </li>
        <li role="option" class="vs__dropdown-option">
          Z
        </li>
        <li role="option" class="vs__dropdown-option">
          F1
        </li>
        <li role="option" class="vs__dropdown-option">
          F2
        </li>
        <li role="option" class="vs__dropdown-option">
          F3
        </li>
        <li role="option" class="vs__dropdown-option">
          F4
        </li>
        <li role="option" class="vs__dropdown-option">
          F5
        </li>
        <li role="option" class="vs__dropdown-option">
          F6
        </li>
        <li role="option" class="vs__dropdown-option">
          F7
        </li>
        <li role="option" class="vs__dropdown-option">
          F8
        </li>
        <li role="option" class="vs__dropdown-option">
          F9
        </li>
        <li role="option" class="vs__dropdown-option">
          F10
        </li>
        <li role="option" class="vs__dropdown-option">
          F11
        </li>
        <li role="option" class="vs__dropdown-option">
          F12
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad0
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad1
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad2
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad3
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad4
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad5
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad6
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad7
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad8
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad9
        </li>
        <li role="option" class="vs__dropdown-option">
          Left
        </li>
        <li role="option" class="vs__dropdown-option">
          Right
        </li>
        <li role="option" class="vs__dropdown-option">
          Up
        </li>
        <li role="option" class="vs__dropdown-option">
          Down
        </li>
        <li role="option" class="vs__dropdown-option">
          Delete
        </li>
        <li role="option" class="vs__dropdown-option">
          Insert
        </li>
        <li role="option" class="vs__dropdown-option">
          Home
        </li>
        <li role="option" class="vs__dropdown-option">
          End
        </li>
        <li role="option" class="vs__dropdown-option">
          PageDown
        </li>
        <li role="option" class="vs__dropdown-option">
          PageUp
        </li>
        <li role="option" class="vs__dropdown-option">
          Enter
        </li>
        <li role="option" class="vs__dropdown-option">
          Escape
        </li>
        <li role="option" class="vs__dropdown-option">
          Space
        </li>
        <li role="option" class="vs__dropdown-option">
          Tab
        </li>
        <li role="option" class="vs__dropdown-option">
          PrintScreen
        </li>
      </ul>
    </div>
  </div>
</template>
</div>
<br>
<br>
<h4>Issues Example with Using 3d Transform context</h4>
<div class="columns" x-data="{items}">
<template x-for="item in items" :key="item">
  <div class="key">
    <label x-text="['label-'+item.index]">label</label>
    <div dir="auto" class="v-select vs--single vs--unsearchable">
      <div class="vs__dropdown-toggle" @click="item.show = !item.show">
        <div class="vs__selected-options">
          <span class="vs__selected">None</span>
          <input readonly="readonly" aria-label="Search for option" role="combobox" type="search" autocomplete="off"
            class="vs__search">
        </div>
        <div class="vs__actions">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation"
            class="vs__open-indicator">
            <path
              d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z">
            </path>
          </svg>          
        </div>
      </div>
      <ul role="listbox" class="vs__dropdown-menu"  x-show="item.show" @click="item.show = false">
        <li role="option" class="vs__dropdown-option">
          None
        </li>
        <li role="option" class="vs__dropdown-option">
          0
        </li>
        <li role="option" class="vs__dropdown-option">
          1
        </li>
        <li role="option" class="vs__dropdown-option">
          2
        </li>
        <li role="option" class="vs__dropdown-option">
          3
        </li>
        <li role="option" class="vs__dropdown-option">
          4
        </li>
        <li role="option" class="vs__dropdown-option">
          5
        </li>
        <li role="option" class="vs__dropdown-option">
          6
        </li>
        <li role="option" class="vs__dropdown-option">
          7
        </li>
        <li role="option" class="vs__dropdown-option">
          8
        </li>
        <li role="option" class="vs__dropdown-option">
          9
        </li>
        <li role="option" class="vs__dropdown-option">
          A
        </li>
        <li role="option" class="vs__dropdown-option">
          B
        </li>
        <li role="option" class="vs__dropdown-option">
          C
        </li>
        <li role="option" class="vs__dropdown-option">
          D
        </li>
        <li role="option" class="vs__dropdown-option">
          E
        </li>
        <li role="option" class="vs__dropdown-option">
          F
        </li>
        <li role="option" class="vs__dropdown-option">
          G
        </li>
        <li role="option" class="vs__dropdown-option">
          H
        </li>
        <li role="option" class="vs__dropdown-option">
          I
        </li>
        <li role="option" class="vs__dropdown-option">
          J
        </li>
        <li role="option" class="vs__dropdown-option">
          K
        </li>
        <li role="option" class="vs__dropdown-option">
          L
        </li>
        <li role="option" class="vs__dropdown-option">
          M
        </li>
        <li role="option" class="vs__dropdown-option">
          N
        </li>
        <li role="option" class="vs__dropdown-option">
          O
        </li>
        <li role="option" class="vs__dropdown-option">
          P
        </li>
        <li role="option" class="vs__dropdown-option">
          Q
        </li>
        <li role="option" class="vs__dropdown-option">
          R
        </li>
        <li role="option" class="vs__dropdown-option">
          S
        </li>
        <li role="option" class="vs__dropdown-option">
          T
        </li>
        <li role="option" class="vs__dropdown-option">
          U
        </li>
        <li role="option" class="vs__dropdown-option">
          V
        </li>
        <li role="option" class="vs__dropdown-option">
          W
        </li>
        <li role="option" class="vs__dropdown-option">
          X
        </li>
        <li role="option" class="vs__dropdown-option">
          Y
        </li>
        <li role="option" class="vs__dropdown-option">
          Z
        </li>
        <li role="option" class="vs__dropdown-option">
          F1
        </li>
        <li role="option" class="vs__dropdown-option">
          F2
        </li>
        <li role="option" class="vs__dropdown-option">
          F3
        </li>
        <li role="option" class="vs__dropdown-option">
          F4
        </li>
        <li role="option" class="vs__dropdown-option">
          F5
        </li>
        <li role="option" class="vs__dropdown-option">
          F6
        </li>
        <li role="option" class="vs__dropdown-option">
          F7
        </li>
        <li role="option" class="vs__dropdown-option">
          F8
        </li>
        <li role="option" class="vs__dropdown-option">
          F9
        </li>
        <li role="option" class="vs__dropdown-option">
          F10
        </li>
        <li role="option" class="vs__dropdown-option">
          F11
        </li>
        <li role="option" class="vs__dropdown-option">
          F12
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad0
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad1
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad2
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad3
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad4
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad5
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad6
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad7
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad8
        </li>
        <li role="option" class="vs__dropdown-option">
          NumPad9
        </li>
        <li role="option" class="vs__dropdown-option">
          Left
        </li>
        <li role="option" class="vs__dropdown-option">
          Right
        </li>
        <li role="option" class="vs__dropdown-option">
          Up
        </li>
        <li role="option" class="vs__dropdown-option">
          Down
        </li>
        <li role="option" class="vs__dropdown-option">
          Delete
        </li>
        <li role="option" class="vs__dropdown-option">
          Insert
        </li>
        <li role="option" class="vs__dropdown-option">
          Home
        </li>
        <li role="option" class="vs__dropdown-option">
          End
        </li>
        <li role="option" class="vs__dropdown-option">
          PageDown
        </li>
        <li role="option" class="vs__dropdown-option">
          PageUp
        </li>
        <li role="option" class="vs__dropdown-option">
          Enter
        </li>
        <li role="option" class="vs__dropdown-option">
          Escape
        </li>
        <li role="option" class="vs__dropdown-option">
          Space
        </li>
        <li role="option" class="vs__dropdown-option">
          Tab
        </li>
        <li role="option" class="vs__dropdown-option">
          PrintScreen
        </li>
      </ul>
    </div>
  </div>
</template>
</div>