overflow-x无法横向滚动仅纵向滚动问题求助

核心问题分析 #

你的代码里导致横向滚动失效的关键是.trendingMoviesContainer设置了flex-wrap: wrap，这个属性会让flex子元素在容器宽度不足时自动换行，从而变成纵向排列，自然无法实现横向滚动。此外还存在ul默认内外边距干扰布局、子元素可能被压缩的问题。

具体修改步骤 #

1. 修正滚动容器样式

   • 移除flex-wrap: wrap，保持子元素强制在一行排列
   • 清除ul默认的padding和margin，避免布局偏移
   • 可选：添加gap属性控制海报之间的间距
   • 确保overflow-y: hidden隐藏纵向溢出，overflow-x: auto启用横向滚动

2. 固定子元素尺寸

   • 给.movieContainer添加flex-shrink: 0，防止flex容器压缩子元素宽度
   • 调整图片适配容器高度，避免图片超出容器范围

修改后的代码 #

Trending组件CSS

.trendingTopContainer {
    max-width: 100%;
    max-height: 15em;
    display: block;
}

.trendingMoviesContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 15em;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    gap: 1rem;
    scrollbar-width: none;
}

.trendingMoviesContainer::-webkit-scrollbar {
    display: none;
}

Movie组件CSS

.movieContainer {
    height: 15em;
    width: 300px;
    flex-shrink: 0;
    list-style: none;
}

.imageContainer {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

Movie组件代码调整（适配图片）

import Link from "next/link";
import classes from "./movie.module.css";
import Image from "next/image";

const Movie = ({ alt, moviePoster }) => {
  const imageUrl = `https://image.tmdb.org/t/p/original/${moviePoster}`;

  return (
    <li className={classes.movieContainer}>
      <Link href={""} className={classes.imageContainer}>
        <Image 
          src={imageUrl} 
          fill 
          alt={alt} 
          style={{ objectFit: "cover" }}
        />
      </Link>
    </li>
  );
};

export default Movie;

补充说明 #

• 使用fill属性让Next.js的Image组件填充父容器，配合object-fit: cover保证图片比例同时适配容器尺寸
• scrollbar-width: none和::-webkit-scrollbar是可选设置，用于隐藏滚动条优化视觉效果
• 测试时确保trendingMoviesResults包含足够多的电影项，超出容器宽度后才会触发横向滚动

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