Increasing number of minRows doesn't increase the height of the textarea after a certain value

[javed24]

I'm trying to leverage the minRows property to expand the size/height of the textArea so that it aligns with some sibling fields (as pointed out in the screenshots below by the red arrows), i.e., the last sibling field (to the left) will be at the same level as the second textArea field (to the right).

Following is my code -

<div className="grid grid-cols-2 gap-x-3">
  <div className="grid grid-rows-6 gap-y-3">
    {/* all the sibling fields to the left */}
  </div>
  <div className="grid grid-rows-2 gap-y-3">
    <AutoSizeTextarea
      name="some_field"
      disabled={disabled}
      id={`some_field-input`}
      {...props}
      value={value}
      onChange={this.handleChange.bind(this)}
    />
    <AutoSizeTextarea
      name="some_other_field"
      disabled={disabled}
      id={`some_other_field-input`}
      {...props}
      value={value}
      onChange={this.handleChange.bind(this)}
    />
  </div>
</div>;

Now, in this first screenshot, minRows is set to 5, which results in the two textArea fields having a height of 97px each.

The issue is, increasing the number of minRows then seems to get capped off at around 127px. The following screenshot is with minRows set to 10 and no matter how high a number I pass it, it doesn't go beyond 127px.

Now I understand this might be getting capped at 127px because of the available height for the wrapper. My goal here is to have the textArea field take up the full height and not leave that extra bit of space below it (like the screenshot below), so that the bottom textArea can align, or be at the same level as the bottom sibling field on the left-hand side. The vertical gap with gap-y-3 isn't causing this extra space, just to be clear.

My understanding was that slightly increasing the number of minRows until their heights match, or at least are close to matching would be the approach here but looks like it doesn't increase after a certain value. I didn't see any upper limit to the minRows property on the docs, so I'm not really sure why increasing the value of the minRows prop isn't resulting in the textArea actually taking up more height. Or rather, from the last screenshot, why it's leaving that extra bit of space.

[Andarist]

I didn't see any upper limit to the minRows property on the docs, so I'm not really sure why increasing the value of the minRows prop isn't resulting in the textArea actually taking up more height. Or rather, from the last screenshot, why it's leaving that extra bit of space.

Yes, there is no upper limit - so it has to be related to your HTML & CSS structure.