如何禁止400px分辨率下卡片缩小？设置min-width未生效怎么办

• 样式权重被覆盖：你在媒体查询中写的min-width: 400px，被同元素下优先级更高的规则（后置的全局宽度配置、内联样式、带!important的默认宽度属性）覆盖，导致限制完全不触发。
• Flex布局默认收缩规则干扰：如果.aside-container是弹性布局的子项，默认自带flex-shrink: 1属性，当父容器宽度不足时，无论子项设了多大的min-width，都会被强制压缩适配父容器空间，这是这类问题最高发的原因。
• 宽度约束范围不全：你仅给外层.aside-container加了宽度限制，但实际展示的热门卡片是容器内的嵌套子元素，子元素依然会随屏幕宽度自动缩放，视觉上就会感觉卡片还在持续缩小。

要实现「屏幕宽度≤400px时，热门卡片不再自动缩小，固定保持400px宽度」的目标，替换原有媒体查询代码即可：

@media screen and (max-width: 400px) {
  /* 约束外层热门区域容器 */
  .aside-container {
    /* 固定最小宽度，提升权重确保规则不被覆盖 */
    min-width: 400px !important;
    /* 关闭Flex布局下的强制收缩行为 */
    flex-shrink: 0;
    /* 宽度计算包含内边距与边框，避免实际尺寸偏差 */
    box-sizing: border-box;
    /* 允许区域内横向滚动，不要强制挤压子元素 */
    overflow-x: auto;
  }
  /* 给容器内实际的热门卡片元素同步加约束 */
  .aside-container .hot-card {
    min-width: 400px;
    flex-shrink: 0;
  }
}

注意：不要通过强制锁定整个页面的视口宽度为400px来达成效果，只需要给热门卡片区域单独开放横向溢出滚动权限，既保证卡片不会被压缩变形，也不会影响页面其他模块的移动端适配逻辑。

内容的提问来源于stack exchange，提问作者Oumar MAURET。