Why content size is different if we have more columns in CSS grid?

Question

Why does this:

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Behave differently from this:

div {
  width: 200px;
  display: grid;
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Note that the only thing I changed was the number of columns and the area each input occupies.

Answer 1

This is an issue with the spec and how 1fr is intepreted.

From a W3C bug/issue report

The "problem" is that 1fr resolves to minmax(auto, 1fr) and this means that we need to know the size of (the parent) before resolving the size of the 1fr track (because the min track sizing function is content sized, it's auto).

There is a quick solution to this issue from the author POV, just replacing 1fr by minmax(0px, 1fr) for example.

..or in this case just setting min-width:0 to the child elements.

Answer 2

I think its a rendering issue casued by the default width set by the browser for the inputs. Its fixed by adding 100% width for the inputs and setting up the border-box box model.

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

input {
  width: 100%;
}

* {
  box-sizing: border-box;
}

<div>
  <input id="first" />
  <input id="second" />
</div>