CSS实现容器的宽度由内容决定

border: .1rem solid #D3E5FF;

padding: 1.5rem;

width: fit-content; /* 关键:宽度由内容决定 */

min-width: calc(20% - 2.0rem); /* 防止在小屏时太窄 */

max-width: 20.9rem; /* 可选:限制最大宽度防过宽 */

flex: 0 0 auto; /* 关键!禁止伸缩,宽度由内容决定 */

white-space: nowrap;

🔑 flex: 0 0 auto 的含义:

  • flex-grow: 0 → 不放大
  • flex-shrink: 0不缩小(关键!)
  • flex-basis: auto → 宽度基于内容(配合 fit-content

这样就能让 width: fit-content 生效。

相关推荐
AI_paid_community3 小时前
如何使用 Claude 在 AI 时代快速入局新的行业?(经验贴)
前端·javascript·后端
程序员韩星3 小时前
从模型直连到统一 AI 网关:多模型 API、Codex 与 Claude Code 接入实践
前端·程序员·ai编程
想要成为糕糕手3 小时前
🐎 从“幻觉”到“可控”:手把手构建一个 LLM 自优化流水线 Harness
前端·llm·agent
sunly_3 小时前
React Suspense 用法详解
前端·javascript·react.js
一心只读圣贤书3 小时前
AI 辅助前端空状态体验治理:从无数据页面到可行动引导
前端·人工智能
沐土Arvin3 小时前
音频h5录制开发
前端
PedroQue993 小时前
uni-app路由插件化:解锁高效开发新姿势
前端·uni-app
何时梦醒3 小时前
TypeScript 类型系统核心:type 与 interface 全方位深度对比(附实战案例)
前端·面试·typescript
渣波3 小时前
TS 必考题深度解析:type 与 interface 的终极对决
前端·javascript
书源3 小时前
AI 能写代码之后,前端工程师的价值在哪里?
前端·面试·程序员