Teg input HTML secara tidak dijangka menggerakkan garis grid CSS

Question

Untuk memudahkan masalah saya, katakan saya mempunyai div grid CSS 2x2. Saya menggunakan templat grid untuk mengubah saiz 3 div (nama kelas: "btn", "title", dan "info") dalam 4 sel ini seperti yang ditunjukkan dalam coretan kod di bawah. (Gabungkan 2 lajur dalam baris ke-2 untuk mengekalkan kelas div ke-3="info")

Div pertama (class="btn") mempunyai nisbah bidang 1/1. Jadi saya hanya menetapkan ketinggiannya kepada 10vh dan ia menjadi segi empat sama.

Soalan saya

Masalahnya ialah teg "input" dalam div class="info" terakhir. Jika saya tidak memasukkan teg, semuanya berfungsi seperti yang diharapkan. Garis grid tengah menghormati kandungan minimum lajur pertama (seperti yang ditetapkan dalam lajur templat grid) dan kekal pada kedudukan paling kiri.

Tetapi jika saya menggunakan teg input itu dalam div terakhir, ia menggerakkan garis tengah grid secara tidak dijangka! Ini tidak dijangka kerana baris kedua grid mempunyai ruang yang mencukupi dan saya rasa ia tidak perlu dialihkan.

Untuk melihat masalah, cuma alih keluar teg input daripada coretan kod di bawah dan lihat perbezaannya.

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

Hanya tambah kelas 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

Saya jumpa jawapannya,

Nilai lebar tanda input hendaklah ditetapkan. Saya menetapkannya kepada mana-mana peratusan dan ia berfungsi dengan baik

input {
  width: 50%;
}