如何让容器内固定宽高div横向排列并显示横向滚动条

问题根源是Flex布局的默认特性：Flex子元素默认启用flex-shrink: 1，容器空间不足时会自动缩小尺寸适配。要保持子元素固定宽高并触发横向滚动，只需做两个关键调整：

• 给Flex容器显式声明flex-wrap: nowrap（确保子元素强制在一行排列）
• 给每个子div设置flex-shrink: 0（禁止子元素被压缩，保留固定宽度）

修改后的代码如下：

<div style={{ width: "70%", background: "azure" }}>
  <div
    style={{
      width: "100%",
      overflowX: "auto",
      display: "flex",
      flexWrap: "nowrap",
      border: "solid 1px #c1c1c1",
      padding: "5px"
    }}
  >
    {Array.from({ length: 10 }, (_, index) => (
      <div
        key={index}
        style={{
          width: "120px",
          height: "200px",
          flexShrink: 0,
          border: "solid 1px",
          backgroundColor: "lightblue",
          marginRight: "5px"
        }}
      >
        Item {index + 1}
      </div>
    ))}
  </div>
</div>

原理说明 #

• flex-wrap: nowrap：Flex容器默认值就是这个，但显式声明更清晰，确保所有子元素不会换行，始终在同一行排列。
• flex-shrink: 0：关闭子元素的自动收缩机制，让子元素严格保持你设置的固定宽度，当子元素总宽度超过容器宽度时，容器的overflowX: auto就会触发，显示横向滚动条。

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