如何将全宽表单输入添加到 css 网格布局而不导致列增长

Question

我有一个简单的 css 网格布局，当我添加一个表单时 <input /> 它会导致列变大。我希望输入填充该列但不使其增长。

我试过添加 min-width: 0 和 overflow: hidden 以及 neither/both 来阻止列增长。如果我使用 max-width 使输入更小，那么列 returns 达到我想要的大小（包含文本的最小值）。但我希望表单输入能够填满整个栏目。

<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 一起使用，但我已经验证我在 Chrome、Safari 和 Firefox Mac OSX.

上得到了相同的行为

Answer 1

您需要定义网格中 rows/columns 的数量及其维度。

<div style="display: grid; grid-template-columns: auto 120px 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>

Answer 2

只需添加width:0;min-width:100%;（相关问题：）

<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">yes</div>
  <div style="background: blue">no</div>
</div>
<p> adding the input </p>

<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 style="width:0;min-width:100%;" placeholder="input" /></div>
  <div style="background: blue">no</div>
</div>

如何将全宽表单输入添加到 css 网格布局而不导致列增长

how to add a full width form input to a css grid layout and not cause the column to grow

html

css

forms

css-grid