使用CSS列并确保直接子项的内容不'；t包装

我使用CSS列跨越多个列来跨越菜单项，这在大多数情况下运行良好，但我的问题是，我不确定是否有办法确保具有CSS列代码的各个父元素的每个直接子元素都保留在同一列中

所以我的意思是，如果子元素的内容看起来太长，无法包含在当前列中，那么整个内容将移动到下一列中，而不是跨越多个列

这里的示例：

如您所见，标题2和标题4都跨越多个列-是否可以确保每个子菜单的内容都包含在一个列中

我考虑为此使用flexbox，并设置

flex-flow:column-wrap以及高度；但是因为面积是绝对的，所以宽度成了一个问题；虽然在本例中不可见，但由于区域太小，删除宽度成为一个问题（它所相对于的元素要小得多，因此将其设置为100%不起作用）；保持原样意味着内容很可能会溢出该区域

示例HTML:

<div class="wrapper">
  <ul class="menu">
    <li>
      <a href="#">Heading 1</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 3</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 4</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 5</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
  </ul>
</div>

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

我不完全确定我是否明白你的意思，但我想你应该把每个菜单放在它自己的专栏里。您可以通过使用如下css网格布局轻松实现这一点：


.wrapper{
填充：10px 20px；
}
.菜单{
显示：网格；
网格模板行：1fr；
网格模板列：重复（5，1fr）；
}
李{
列表样式：无；
}
.菜单{
位置：绝对位置；
色谱柱：3130px；
柱间距：40px；
填充：20px 25px；
背景颜色：灰色；
}
.菜单a{
颜色：#fff；
}
.菜单>李{
填充顶部：10px；
}
.菜单>李>a{
字号：17px；
字体大小：粗体；
文字装饰：无；
}
.menu>li>ul{
填充：12px 0 15px；
}
.menu>li>ul>li{
线高：1.4；
}































































我不确定是否完全明白你的意思，但我想你应该把每个菜单放在它自己的专栏里。您可以通过使用如下css网格布局轻松实现这一点：


.wrapper{
填充：10px 20px；
}
.菜单{
显示：网格；
网格模板行：1fr；
网格模板列：重复（5，1fr）；
}
李{
列表样式：无；
}
.菜单{
位置：绝对位置；
色谱柱：3130px；
柱间距：40px；
填充：20px 25px；
背景颜色：灰色；
}
.菜单a{
颜色：#fff；
}
.菜单>李{
填充顶部：10px；
}
.菜单>李>a{
字号：17px；
字体大小：粗体；
文字装饰：无；
}
.menu>li>ul{
填充：12px 0 15px；
}
.menu>li>ul>li{
线高：1.4；
}































































这是否回答了您的问题@04FS这就是我想要的-谢谢。同时使用
内部中断：避免和
内部分页符：避免解决：）这能回答你的问题吗@04FS这就是我想要的-谢谢。同时使用
内部中断：避免和
内部分页符：避免解决了：）嘿，好了-不一定希望每个菜单都在它自己的列中（因为希望每个列都有尽可能多的内容），但主要的问题是确保每个菜单始终位于一列中，而不是扩展到多个列。您能提供一些有关菜单布局的信息吗？我很不确定你希望它是什么样子。嘿，我不一定希望每个菜单都在它自己的列中（就像希望每个列都有相同的am一样）