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 生效。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)