我认为您应该在. container div中添加min-width，以防止它变得太窄：

.container {
  margin: auto;
  width: 20%;
  min-width: 170px;
  padding: 10px;
  border: 1px solid #E1291B;
  display: grid;
  background-color: bisque;
}

.form-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10%;
}

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="">
    <label for="pass">Mot de passe   </label>
    <input type="password" name="pass" id="">
    <input type="submit" value="Login">
  </form>
</div>

你也可以把width: 96%（例如）放在输入中，让它们根据div大小增长：

.form-login input  {
  width: 96%;
}

把min-height赋给.form-login类。你也可以用.containerwidth:max-width代替width。容器将根据它里面内容的宽度来占用宽度。

.container {
  margin: auto;
  width: max-content; /*insted of 20%*/
  padding: 10px;
  border: 1px solid #E1291B;
  display: grid;
  background-color: bisque;
  height:max-content;
}

.form-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10%;
  min-height:160px; /* give min-height of 160px or more */
}

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="">
    <label for="pass">Mot de passe   </label>
    <input type="password" name="pass" id="">
    <input type="submit" value="Login">
  </form>
</div>