响应式布局问题：窗口小于250px时内容溢出布局

• 设置容器最小宽度
  给页面主容器（比如最外层包裹div或<body>）添加最小宽度限制，配合横向溢出隐藏，避免容器被过度压缩导致内容溢出：

.main-wrapper {
  min-width: 250px;
  overflow-x: hidden;
}

• 编写极端窄屏专属媒体查询
  针对250px及以下的屏幕，针对性调整内容样式，优化专业显示效果：
  • 缩小基础字体尺寸，减少文字占用空间
  • 隐藏非核心导航元素或转为折叠样式
  • 缩减模块的内外边距，优先保留核心内容的显示空间
    示例代码：

@media (max-width: 250px) {
  body {
    font-size: 14px;
  }
  .site-nav .secondary-link {
    display: none;
  }
  .content-block {
    padding: 0 6px;
  }
}

• 媒体元素与弹性布局兜底
  确保图片、视频等媒体元素不会撑破容器，同时让弹性子元素支持自动收缩：

img, video, iframe {
  max-width: 100%;
  height: auto;
}

.flex-container .item {
  flex-shrink: 1;
  max-width: 100%;
}

• 全局禁止横向滚动
  如果仍出现横向滚动条，给根元素添加全局样式兜底：

html, body {
  width: 100%;
  overflow-x: hidden;
}

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