QPage内横向滚动菜单宽度适配：如何避免硬编码宽度？

核心思路 #

要实现父元素内的横向滚动且无需硬编码宽度，关键是让滚动容器占满父元素宽度，同时内容容器根据子元素总宽度自然撑开，避免固定宽度限制。

修改后的代码 #

Template 部分

<template>
  <q-layout>
    <q-page-container class="column" style="background-color: rgb(217,225,238);">
      <q-page>
        <!-- 移除冲突的布局类，避免干扰宽度计算 -->
        <div class="slide-wrap">
          <div class="slide">
            <menu-bar></menu-bar>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Style 部分

<style lang="scss" scoped>
.slide-wrap {
  /* 滚动容器占满父元素宽度 */
  width: 100%;
  /* 仅在内容超出时显示横向滚动条 */
  overflow-x: auto;
  /* 可选：优化滚动条视觉样式 */
  scrollbar-width: thin;
}

.slide {
  /* 禁止内容容器被压缩，宽度由子元素总和决定 */
  flex-shrink: 0;
  /* 让容器宽度随子元素自然撑开 */
  display: inline-flex;
  /* 可选：给菜单添加左右内边距，避免贴边 */
  padding: 0 16px;
}
</style>

关键调整说明 #

• 移除模板中多余的col row column类：这些Quasar布局类会自动设置宽度、flex属性，干扰滚动容器的宽度计算逻辑。
• slide-wrap设width: 100%：确保滚动容器完全贴合父元素（q-page）的宽度，不会出现超出或不足的情况。
• slide用inline-flex + flex-shrink: 0：让内容容器根据menu-bar的实际总宽度自动撑开，无需硬编码宽度，同时防止内容被压缩变形。
• 替换overflow-x: scroll为auto：只有当内容超出容器宽度时才显示滚动条，提升交互体验。

内容的提问来源于stack exchange，提问作者MSZMC