La balise d'entrée HTML déplace de manière inattendue le quadrillage CSS

Question

Pour simplifier mon problème, disons que j'ai un div de grille CSS 2x2. J'ai utilisé un modèle de grille pour redimensionner 3 divs (noms de classe : "btn", "title" et "info") dans ces 4 cellules, comme indiqué dans l'extrait de code ci-dessous. (Fusionnez 2 colonnes dans la 2ème ligne pour conserver la 3ème div class="info")

Le premier div (class="btn") a un rapport hauteur/largeur de 1/1. Je règle donc simplement sa hauteur à 10vh et cela devient un carré.

Ma question

Le problème est la balise "input" dans le dernier div class="info". Si je ne saisis pas de balise, tout fonctionne comme prévu. Le quadrillage du milieu respecte le contenu minimum de la première colonne (tel qu'il est défini dans les colonnes de modèle de grille) et reste à la position la plus à gauche.

Mais si j'utilise cette balise d'entrée dans le dernier div, cela déplace la ligne centrale de la grille de manière inattendue ! C'est inattendu car la deuxième ligne de la grille a suffisamment d'espace et je ne pense pas qu'elle doive être déplacée.

Pour voir le problème, supprimez simplement la balise d'entrée de l'extrait de code ci-dessous et voyez la différence.

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

Ajoutez simplement la align-self: start 添加到 infoclasse

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

J'ai trouvé la réponse,

La valeur de largeur de la marque d'entrée doit être définie. Je l'ai réglé sur n'importe quel pourcentage et ça marche très bien

input {
  width: 50%;
}