我有一个简单的CSS网格布局，当我添加一个表单<input />它导致列增长。我希望输入填充列，而不是使其增长。

我已尝试添加min-width: 0和overflow: hidden，但两者都无法阻止列的增长。如果我使用max-width使输入变小，那么列将返回到我想要的大小（包含文本的最小值）。但我想让表单输入填满整个列。

<div style="display: grid; grid-template-columns: auto auto 1fr">
  <div style="background: red">Hello</div>
  <div style="background: green">yes I'm a big long</div>
  <div style="background: blue">no</div>
  <div style="background: red">Hello</div>
  <div style="background: green"><input placeholder="input" /></div>
  <div style="background: blue">no</div>
</div>

看起来是这样的。

我做了一个CodePen来玩这个。我只需要它与Chrome一起工作，但我已经证实我在Mac OSX上的Chrome、Safari和Firefox上获得了相同的行为。

顺晟科技：

只需添加width:0;min-width:100%;（相关问题：如何将文本宽度与动态调整大小的图像/标题的宽度相匹配？）

<代码><；DIV style=display：网格；网格-模板-列：自动自动1Fr>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；是的，我是一个大多头<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；是<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；/DIV>；<；P>；添加输入<；/p>；<；DIV style=display：网格；网格-模板-列：自动自动1Fr>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；是的，我是一个大多头<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；<；input style=“ width：0；min-width：100%；” placeholder=“ input ”/>；<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；/DIV>；

您需要定义网格中的行数/列数以及它们的维数。

<代码><；DIV style=display：网格；网格-模板-列：自动120px 1Fr>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；是的，我是一个大多头<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；DIV style=“ background：red ”>；你好<；/DIV>；<；DIV style=“ background：green ”>；<；input placeholder=“ input ”/>；<；/DIV>；<；DIV style=“ background：blue ”>；否<；/DIV>；<；/DIV>；