为何设置fr为列宽时输入框与标签无法缩小？fr的具体含义是什么？

一、fr单位的具体含义 #

fr是CSS Grid布局中的分数单位，专门用于分配网格容器的剩余可用空间（即容器总宽度/高度减去所有固定尺寸、内容自适应尺寸的元素占用空间后剩下的部分）。

举个简单例子：

• 如果网格容器宽度为600px，里面有两列分别设为1fr和2fr，且无其他固定宽度元素，总份数为3，每份宽度为600px / 3 = 200px，最终第一列宽200px，第二列宽400px。
• 如果容器内还有一个固定宽度100px的元素，剩余空间为600px - 100px = 500px，每份宽度约为166.67px，对应列宽分别为166.67px和333.34px。

二、输入框和标签无法缩小的原因 #

1. 输入框（input）无法缩小的原因 #

浏览器对input这类表单控件有默认最小宽度限制（不同浏览器默认值略有差异），同时input的内容会自动撑开宽度。即使使用fr分配空间，当分配的空间小于input的默认最小宽度时，它会优先保持自身最小尺寸，导致无法缩小。

解决办法：给input设置min-width: 0，配合overflow: hidden，打破浏览器默认的最小尺寸约束，让它能跟随fr的分配规则缩小。

2. 标签（label）无法缩小的原因 #

label默认是行内/行内块元素，宽度由内部内容决定，且网格布局默认的align-items: stretch不会强制压缩行内元素宽度。另外，若标签内容未设置换行规则，也会撑住宽度，无法被fr分配的空间压缩。

解决办法：

• 给label设置min-width: 0，允许它的宽度小于内容宽度；
• 设置white-space: normal（而非nowrap），让内容换行适应缩小的宽度；
• 将label设为块级元素，配合overflow: hidden强制压缩。

内容的提问来源于stack exchange，提问作者Aman