如何实现固定宽高div容器横向滚动，子元素不换行且始终顶部对齐？

当前代码出现折行、触发纵向滚动，是两个排版规则叠加导致的：

• display: inline-block的子元素本质是行内级元素，和普通文字一样，默认会在父容器宽度不足时自动折行，和容器有没有设overflow-x: auto没有直接关系。
• 因为子元素一直在自动折行排版，所有内容的总宽度始终和父容器的固定宽度一致，根本不会达到触发横向滚动的宽度阈值；反而折行后总高度会超过容器的30px固定高度，自然就触发了纵向滚动。

你之前用inline-block解决顶部对齐的思路是对的，只是没有覆盖行内元素的默认折行规则。

方案1：基于现有inline-block代码的最小改动 #

只需要补充两个关键设置，不需要大改原有代码逻辑：

• 给父容器添加white-space: nowrap：强制行内类元素（包含inline-block）不折行，所有子元素排在同一水平线上。
• 启用父容器的overflow-y: hidden：避免折行残留的高度误触发不必要的纵向滚动条。

调整后的完整CSS：

#d1 {
  width: 100px;
  height: 30px;
  outline: 1px solid #000000;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; /* 核心：禁止子元素折行 */
  /* 对齐兜底设置 */
  font-size: 0;
}

.d2 {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  top: 0px;
  background-color: #454545;
  /* 核心：解决inline-block基线对齐导致的顶部错位，比单纯设relative偏移更稳定 */
  vertical-align: top;
  font-size: 14px;
}

方案2：Flex 布局实现（更易维护，推荐） #

如果不需要兼容IE11及更早的老旧浏览器，用Flex布局的逻辑更直观，不会有行内元素的折行、基线对齐的坑：
调整后的完整CSS：

#d1 {
  width: 100px;
  height: 30px;
  outline: 1px solid #000000;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap; /* 强制子元素排在同一行 */
}

.d2 {
  width: 30px;
  height: 30px;
  background-color: #454545;
  /* 核心逻辑：禁止flex布局对子元素的宽度自动压缩，保证每个子元素保持30px的设定宽度，攒够总宽度触发横向滚动 */
  flex-shrink: 0;
  /* 强制子元素顶部对齐 */
  align-self: flex-start;
}

• 不要只靠position: relative; top: 0解决对齐问题，这种方式只是视觉层面的位移，不会改变元素在排版流里的位置，碰到inline-block的基线对齐偏移时很容易失效。
• 横向滚动触发的必要前提是所有子元素的总宽度大于容器的固定宽度。如果排版逻辑允许子元素折行，总宽度永远和容器宽度持平，永远不会触发横向滚动。

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