HTML input tag move CSS grid line unexpectedly

Question

To make my problem simplified, just assume I have a 2x2 CSS grid div. I used grid template to adjust 3 div (with class names: "btn", "title", and "info") in these 4 cells as below snippet code. (2 columns in the second row are merged to keep 3rd div class="info")

The first div (class="btn") has an aspect ratio of 1/1. so I just set its height to 10vh and it becomes a square.

My Problem

The problem is "input" tag inside last div class="info". If I do not have the input tag, everything works as expected. the middle grid line respects the min-content of the first column (as it is set in grid-template-columns) and keep to the most left position.

But if I use that input tag inside the last div, it would move the grid middle line unexpectedly! It is unexpected because the 2nd row of the grid has enough space for it and I think it should not be moved.

To see the problem just remove the input tag from the below snippet and see the difference.

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}

<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>

Answer 1

I found the answer,

Should set the input tag width value. I set it to any percentage and its works fine

input {
  width: 50%;
}