我想显示几个元素在卡，来自我的路由系统，在一个类似的方式，我正在创建我的侧边栏（这是正常工作）。我得到了所有的标题和图标，链接是完美的工作。
这就是我正在做的：因为我的一些元素，我从我的路由系统得到的有孩子（例如，我有"agenda"、"sessao"和"packsemodulos"的点，并且最后一个元素在其内部有两个元素"packs"和"modulos"）当我检查我的路由文件时，对于元素，它 Package 每个父元素，为"agenda"制作 Package 器，为"sessao"制作另一个 Package 器，和一个裹着两个孩子的包裹"packs" e "modulos"（我不希望显示它的父项。
一切都在按我想要的方式进行，除了一件事，那就是我正在挣扎的。我展示了我所有的牌（wrapped）水平放置，当一个 Package 器不适合屏幕时，它会转到下一行。只有一个元素的 Package 器工作得很好，但是对于有子元素的 Package 器，这是我挣扎的地方，因为如果 Package 器不适合屏幕，整个 Package 器会改变它的行，我只想把不适合这行的子元素，移到下一行例如，如果只有Agenda，Sessao和Pack适合一行，我只想把Modulo移到下一行，相反，Pack和Modulo都要改变.
下面是我的代码

<template>
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">

    <template v-if="!item.hidden&&item.children && hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link :to="resolvePath(onlyOneChild.path)">
        <!-- single -->
        
        <el-card   :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest} ">
          <!-- <item v-if="onlyOneChild.meta" :title="onlyOneChild.meta.title" /> -->          
          <!-- <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" :collapse="collapse" /> -->
          <!-- <span>{{ onlyOneChild.meta.title }}</span> -->
          <div class="contentCard">
            <div class="icon">
          <i :class="onlyOneChild.meta.icon" />
        </div>
          <span class="title">
            {{ generateTitle(onlyOneChild.meta.title) }}
          </span>
        </div>
        </el-card>
    
      </app-link>
    </template>
  <!-- group -->

        <template   v-else  class="childCard" v-for="child in visibleChildren" :index="resolvePath(item.path)">
     
          <app-link :to="resolvePath(child.path)">
            <el-card  class="contentClass" :index="resolvePath(child.path)">
              <div class="contentCard">
                <div class="icon">
              <i :class="child.meta.icon" />
                </div>
              <span class="title">
                {{ generateTitle(child.meta.title) }}
              </span>
         </div>
            </el-card>
          </app-link>
        </template>
   
      </div>    

  </template>

下面是我的CSS样式

<style lang="css" scoped>
  .el-menu--inline span{
    font-size: 0.9em;
  }
  
  .el-menu-item svg{
    margin-right: 11px;
  }
  
  .el-menu-item-group__title {
    display: none;
  }
  
  .is-active .menu-dot{
    background: #cca13c;
  }

  .menu-dot {
    width: 21px;
    background: #304156;
    height: 10px;
    border-radius: 20px;
    margin-right: 10px;
  }

.contentClass{
  margin-right:20px;
}

.childCard{
  flex-grow:1;
}
.contentCard{
  display:grid;
}

.icon{
  text-align: center;
  font-size: 50px;
}

.title{
  text-align: center;
  font-size: 10px;
}

.el-card{
  margin-right: 20px;
  margin-top: 10px;
  min-height: 145px;
  min-width: 250px;
  flex-grow:1;
}

.menu-wrapper{

  flex-wrap: wrap;
  display: flex;
  min-height: fit-content;
  
}
  
  </style>

谢谢
编辑：由于上面所说的可能会让人感到困惑，为了更简单，我在一行中有几个 Package 器，里面有卡片。如果每个 Package 器有一张卡片，我的代码就可以正常工作，但是，我的一些 Package 器里面有两张或更多的卡片，当它到达屏幕的极限时（特别是如果是一个小屏幕），整个 Package 器转到下一行，相反，我只希望没有空间适合在同一行的卡，在 Package 器内，改变到下一行。