宽度超出时Div未保持同行，如何实现橙色容器内元素横向滚动？

嘿，我来帮你搞定这两个头疼的问题！

一、让橙色容器内的"图片"（div元素）不换行且支持横向滚动 #

你可以通过两种方式实现，选一种适合你的就行：

方式1：Flex布局（推荐） #

给images-wrap添加以下CSS样式，利用flex实现强制不换行+横向滚动：

.images-wrap {
  /* 保留你原有的绝对定位属性 */
  position: absolute;
  top: 0;
  left: 0;
  /* 新增核心样式 */
  display: flex;
  flex-wrap: nowrap; /* 强制子元素不换行 */
  overflow-x: auto; /* 超出容器宽度时显示横向滚动条 */
  /* 可选：隐藏滚动条（不影响滚动功能） */
  scrollbar-width: none; /* 适配Firefox */
  -ms-overflow-style: none; /* 适配IE/Edge */
}

/* 适配Chrome、Safari等浏览器隐藏滚动条（可选） */
.images-wrap::-webkit-scrollbar {
  display: none;
}

/* 确保子元素（你的"图片"div）不被压缩 */
.images-wrap > div {
  flex-shrink: 0; /* 禁止子元素被压缩 */
  /* 这里替换成你实际需要的宽高 */
  width: 200px;
  height: 150px;
}

方式2：Inline-block + 不换行文本 #

如果不想用flex，也可以用这个方案：

.images-wrap {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap; /* 禁止容器内文本换行（作用于inline-block元素） */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.images-wrap > div {
  display: inline-block; /* 让子元素横向排列 */
  white-space: normal; /* 恢复子元素内部的文本换行（如果需要） */
  width: 200px;
  height: 150px;
}

二、修复绝对定位元素撑开父容器高度的问题 #

你说得没错，正常情况下相对定位容器内的绝对定位元素不会影响父容器高度——因为绝对定位元素会完全脱离文档流。出现这个问题大概率是以下原因：

• 没有给绝对定位元素设置明确的位置偏移：如果你的images-wrap只加了position: absolute，但没设置top/left/bottom/right，它虽然脱离了文档流，但位置还是停留在原来的文档流位置，视觉上看起来像是撑开了父容器。解决方法就是给images-wrap加上top: 0; left: 0;（或者你需要的其他位置），让它彻底脱离原文档流位置。
• 父容器高度由其他元素撑开：检查test-ar内的其他元素，是不是有未定位的内容，这些内容才是撑开父容器高度的原因，而不是images-wrap。
• 定位属性写错了：比如把images-wrap的position: absolute写成了position: relative，或者test-ar没设置position: relative，导致images-wrap的绝对定位是相对于更上层的容器，从而打乱了布局。

先检查第一点，给images-wrap加上明确的位置偏移，应该就能解决父容器被撑开的问题啦。

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