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

相关推荐
程序员爱钓鱼6 分钟前
Rust String 与 &str 详解:字符串所有权、借用与转换
前端·后端·rust
码农学院11 分钟前
GEO与SEO协同:从传统搜索到生成式搜索的平滑迁移路径
服务器·前端·python
咩咩啃树皮9 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny9 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹9 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny9 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn9 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker10 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜10 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康10 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端