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%;
}