Textarea size inside of CSS grid - html

Question

I am trying to use an implicit CSS grid to generate a layout for the following basic HTML structure:
<div class='row'>
<textarea></textarea>
<div></div>
</div>
where the .row div is a CSS grid with an auto-flow set to column for automatically placing elements as columns:
.row {
display: grid;
grid-auto-flow: column;
}
I would expect, as with most elements, that the CSS grid would provide equal space to both the textarea and the div elements along the row. But instead, the layout looks like this:
The textarea takes up more space along the row than expected. When you try to resize the textarea, I see the following:
What seems to be happening here is the grid is adding additional space to the right of the textarea equal to the width of the div on the right. What I can't figure out is why this is happening, and why the elements don't initially have an equal width. What am I missing here?
I've created a simple JSFiddle for testing this behavior here.

Answer 1

To make them the same size you need to ask the grid to do that
grid-auto-columns:1fr;
You can stop the user resizing the textarea with resize:none
If you want to get this to work whilst letting the user resize, I couldn't find a css solution
I had an idea but I couldn't get it to work.
The gist was
have a set of [invisible] divs as a first row
have a function that can be called on an element of a grid to see if its offsetWidth is lesser to one of the hidden divs of the same column
if it is, manipulate the css from auto to setting the width explicitly to the textarea's for that column, then with some mix of repeat(x, 1fr) (pre-textarea columns) & repeat(auto-fill, 1fr) (post-textarea columns)
then attach this function to the resize (or mouseup) of the textarea
Alternatively, consider flex.
It will have the opposite problem; it wont force an element to be 1fr (and apply that unwanted padding), but I dont think you can ask it to be 1/<number in row> in size [in css only] either.

Answer 2

why the elements don't initially have an equal width. What am I missing here?
textarea has a width initially defined by cols which has a default value equal to 20
cols
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
This width play a role in defining the initial width of the textarea. You can set a small value to make sure it behave almost the same as div.
.row {
display: grid;
grid-auto-flow: column;
}
.row > div {
border: 1px dotted;
}
<div class='row'>
<textarea cols=1></textarea>
<div></div>
</div>
You can still notice a small difference since the textarea is not having an initial width exactly equal to 0 and it also has some padding so its column will logically be a little bigger.
To avoid this and to also fix the resize issue better explicitely define the grid like below where you set the initial width of the textarea to be half the width of grid.
I don't know your real use case but I will consider the fact that your grid is full page width (I will also consider the default body margin)
.row {
display: grid;
grid-template-columns:auto 1fr;
}
.row > div {
border: 1px dotted;
}
textarea {
width:calc(50vw - 16px);
box-sizing:border-box;
}
<div class='row'>
<textarea ></textarea>
<div></div>
</div>