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 生效。

相关推荐
嘟嘟同学和妮妮同学17 分钟前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光37 分钟前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼41 分钟前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下43 分钟前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构
全栈项目管理程序猿1 小时前
ArcGIS JS 基础教程(29):CSVLayer 表格点位图层
前端·javascript
骑着蜗牛撵大象3272 小时前
豆包 Seed 驱动的记账智能体:从拍票抽取到月报生成的全链路落地记录
java·前端·javascript·结构化输出·豆包seed·多模态识别·记账系统
溪语流沙2 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js
kyriewen2 小时前
我逐个测了 JSON.stringify 的 7 个坑:第 1 个就在丢数据
前端·javascript·程序员
积流成海2 小时前
用代码实现哈希计算器:Web Crypto API 实战
前端·算法·哈希算法·哈希函数·盘子工具站
data analyse 4563 小时前
服务端访问日志聚合 PV 与 UV 怎么实现?日志采集与口径设计
大数据·前端·数据分析