HTML 輸入標記意外移動 CSS 網格線

Question

為了簡化我的問題，假設我有一個 2x2 CSS 網格 div。我使用網格模板來調整這 4 個單元格中的 3 個 div（類別名稱：「btn」、「title」和「info」），如下程式碼片段所示。 （合併第二行中的 2 列以保留第 3 個 div class="info"）

第一個 div (class="btn") 的寬高比為 1/1。所以我只是將它的高度設定為 10vh，它變成了一個正方形。

我的問題

問題是最後一個 div class="info" 中的「input」標籤。 如果我沒有輸入標籤，一切都會按預期進行。中間的網格線尊重第一列的最小內容（因為它在 grid-template-columns 中設定）並保持在最左邊的位置。

但如果我在最後一個 div 中使用該輸入標籤，它會意外地移動網格中線！這是出乎意料的，因為網格的第二行有足夠的空間，我認為它不應該被移動。

要查看問題，只需從下面的程式碼片段中刪除輸入標記並查看差異。

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

只需將 align-self: start 加入到 info 類別

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;
  align-self: start; 
  padding:2px
}

<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 2

我找到了答案，

應設定輸入標記寬度值。我將其設置為任意百分比並且效果很好

input {
  width: 50%;
}