水平媒体滚动器内容堆叠重叠问题求助（仅用HTML/CSS）

问题根源 #

你的代码里有三个核心问题导致元素重叠：

• .media-scroller设置了grid-auto-columns: 20%，但.media-element又定义了min-width:260px——当容器宽度不足时，20%的列宽会小于260px，网格列宽规则和元素最小宽度规则冲突，元素被迫溢出重叠。
• 图片标签里写了行内height="400px"，直接覆盖了CSS里的aspect-ratio设置，导致图片高度固定，撑大容器后挤压其他元素空间。
• .media-element > img里的inline: 100%是无效CSS属性，属于笔误，应该用width: 100%。

修复后的完整代码 #

HTML（移除行内height属性）

<section>
    <h1 class=heading>Starring</h1>
    <div class="media-scroller">
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BNjM5OTE1MjA3Nl5BMl5BanBnXkFtZTgwOTAxNjk4MDE@._V1_.jpg" alt="Tobin Bell">
        <p>Tobin Bell</p>
      </div>
      <div class="media-element">
        <img src="https://scontent.fhlz4-1.fna.fbcdn.net/v/t1.6435-9/165941505_293315678847053_9188874086571008155_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=be3454&_nc_ohc=_CZiCziE2joAX-cUwyC&_nc_ht=scontent.fhlz4-1.fna&oh=00_AfAG7qwps8OiPXvCRF4sVYEwdgWNK8cIN_o_c_n9IyghxQ&oe=659FAD8E" alt="Shawnee Smith">
        <p>Shawnee Smith</p>
      </div>
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BOGQ5ZTI2OGYtZGZjNC00ZDg2LWE4MGItYTk4YTY2OGRiYTU2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" alt="Synnøve Macody Lund">
        <p>Synnøve Macody Lund</p>
      </div>
      <div class="media-element">
        <img src="https://www.gateworld.net/wp-content/uploads/2017/06/beach01.jpg" alt="Michael Beach">
        <p>Michael Beach</p>
      </div>
      <div class="media-element">
        <img src="https://latw.org/sites/default/files/styles/artist_profile_l/public/Brand%2C%20Steven%202016%20Amadeus.jpg?itok=Mc-VVfFM" alt="Steven Brand">
        <p>Steven Brand</p>
      </div>
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BZTM0NDY1ZjctNjFkMC00OTExLTgwNjAtYjE1M2NjNjYwNTQ2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" alt="Renata Vaca">
        <p>Renata Vaca</p>
      </div>
    </div>
  </section>

CSS（修正列宽、属性笔误）

.media-scroller {
  display: grid;
  gap: 30px;
  grid-auto-flow: column;
  /* 用minmax保证列宽至少260px，同时自适应可用空间 */
  grid-auto-columns: minmax(260px, 1fr);
   
  padding: 30px;

  overflow-x: auto;
  overscroll-behavior-inline: contain; /* 修正拼写错误，统一为美式标准拼写 */
}

.media-element {
  display:grid;
  grid-template-rows: min-content;
  gap: 4px;
  padding: 20px;
  background-color: #343434;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 #851111,0 6px 18px 0 #B71717;
  min-width: 260px;
}

.media-element > img {
  /* 修正笔误，用width:100%让图片占满容器宽度 */
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
}

额外说明 #

现在滚动器会保证每个元素至少260px宽，图片按2:3的比例自适应容器，不会再出现重叠问题；同时修正了overscroll-behavior-inline的拼写错误，避免兼容性问题。

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