<Main />组件需实现最小宽度1000px及横向滚动，当前未生效求助

return (<Main />)

问题核心 #

无法实现效果的关键原因通常是容器溢出规则未正确配置，或是<Main />的宽度被flex/grid等布局规则强制压缩。

修复方案 #

根据你的需求，只需给<Main />及其父容器添加以下CSS规则即可解决：

基础配置方案 #

/* 给Main组件设置最小宽度 */
.Main {
  min-width: 1000px;
}

/* 给Main的直接父容器开启横向滚动 */
.Main-container {
  overflow-x: auto;
  /* 可选：优化滚动条样式 */
  scrollbar-width: thin;
}

Flex布局适配（若父容器用了flex） #

如果<Main />的父容器是flex容器，默认会压缩子元素宽度，需额外添加flex-shrink: 0防止宽度被强制缩小：

.Main {
  min-width: 1000px;
  flex-shrink: 0;
}

.Main-container {
  overflow-x: auto;
}

验证注意事项 #

• 检查是否有max-width、width: 100%这类规则覆盖了min-width设置
• 确认父容器没有设置overflow-x: hidden（会隐藏滚动条）
• 缩小浏览器窗口测试，观察横向滚动条是否正常出现

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