Использование столбцов CSS и убедиться, что содержимое прямых детей не обертывает ⇐ CSS

[Anonymous]

Я использую столбцы CSS для промежутка элементов меню по нескольким столбцам, он работает нормально для большей части, но я не уверен, есть ли способ убедиться, что каждый Direct ребенок соответствующего родительского элемента с кодом столбца CSS остается в одном и том же столбце. Содержится в текущем столбце, тогда все это будет перемещено в следующий столбец, а не охватывать содержимое по нескольким столбцам. 4 Оба пролетают несколько столбцов-возможно ли убедиться, что содержимое каждого соответствующего подменю содержится в одном столбце? Но поскольку область абсолютная ширина становится проблемой; Несмотря на то, что в этом примере не подходит, удаление ширины становится проблемой, так как область слишком мала (элемент, к которому он относится, намного меньше, поэтому установление ее до 100% не работает); оставить это, как это означает, что содержание может переполнить область вполне возможно.

• Heading 1
  
  
  Item
• Item
• Item
• Item

[*]
Heading 2

• Item
• Item
• Item
• Item

[*]
Heading 3

• Item
• Item
• Item
• Item

[*]
Heading 4

• Item
• Item
• Item
• Item

[*]
Heading 5

• Item
• Item
• Item
• Item

< /code>

Пример SCSS: < /strong> < /p>

.wrapper {
position: relative;
padding: 10px 20px;
}

li {
list-style: none;
}

.menu {
position: absolute;
width: 45vw;
columns: 3 130px;
column-gap: 70px;
padding: 20px 25px;
background-color: gray;
}

.menu a {
color: #fff;
}

.menu > li {
padding-top: 10px;
}

.menu > li > a {
font-size: 17px;
font-weight: bold;
text-decoration: none;
}

.menu > li > ul {
padding: 12px 0 0 15px;
}

.menu > li > ul > li {
line-height: 1.4;
}


Подробнее здесь: https://stackoverflow.com/questions/589 ... -dont-wrap