求助：实现动态宽度Panel的居中显示与局部横向滚动效果

核心思路 #

• 外层容器占满视口宽度，开启横向溢出滚动，纵向禁止滚动
• 借助Flex布局的justify-content: center，实现视口宽于Panel时的居中效果
• 内层Panel通过inline-flex让宽度完全由内容自适应，不强制拉伸

代码实现 #

HTML结构 #

<div class="scroll-container">
  <div class="dynamic-panel">
    <!-- 自定义内容，宽度随内容自动变化 -->
    <div class="panel-item">内容块1</div>
    <div class="panel-item">内容块2</div>
    <div class="panel-item">内容块3</div>
    <div class="panel-item">内容块4</div>
    <div class="panel-item">内容块5</div>
  </div>
</div>

CSS样式 #

/* 外层滚动容器：控制视口内的滚动范围 */
.scroll-container {
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
}

/* 动态宽度Panel：宽度由内部内容决定 */
.dynamic-panel {
  display: inline-flex;
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  /* 可选：内容过短时让Panel占满视口 */
  min-width: 100%;
}

/* 示例内容块：模拟实际业务内容 */
.panel-item {
  width: 200px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果说明 #

• 页面宽度大于Panel总宽度时，scroll-container的居中属性会让Panel在视口内居中显示
• 页面宽度小于Panel总宽度时，scroll-container自动出现横向滚动条，仅Panel区域可滚动，页面其他部分保持固定
• 移除.dynamic-panel的min-width: 100%，可让Panel在内容过短时仅占据内容所需宽度

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