居中Flex项目在视口缩小时被截断的解决方法

可以通过以下CSS代码实现需求，无需修改原有HTML结构：

body {
  overflow-x: auto;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
  margin: 0 auto;
}

.container > div {
  flex-shrink: 0;
  /* 可选：添加内边距优化布局 */
  padding: 0 1rem;
}

关键属性说明： #

• body { overflow-x: auto; }：当页面内容宽度超出视口时，自动生成水平滚动条，确保所有子元素都能通过滚动查看，避免内容被截断。
• .container { width: fit-content; }：让容器宽度由内部子元素的总宽度决定，而非强制占满视口，为居中或滚动提供基础。
• .container { margin: 0 auto; }：当容器总宽度小于视口宽度时，利用自动外边距实现容器整体居中，保持子元素的居中布局。
• .container > div { flex-shrink: 0; }：禁止子元素在空间不足时被压缩，保证每个子元素的原有宽度和内容完整性。

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